CSS中格式化的盒子在JSfiddle工作，但在Chrome中不独立

我做了一个需要以多种不同方式格式化的弹出窗口：单击此处查看

它在jsfiddle.net中显示良好，但是当您将代码放入文件中并通过Chrome查看时，它不起作用，因为popup_item与popup_heading的大小不同。

我的问题是我是这样做的，还是我应该以不同的方式进行此操作？

为什么它在jsfiddle.net中显示正常，而不是在chrome中，我使用chrome来查看jsfiddle.net，不应该显示相同的吗？

.popup_box table
{width:100%;}

这是JSFIDDLE中发布的代码：

CSS：

.popup_box table
{
    width:100%;
}
.popup_overlay
{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image: url(http://localhost/justin/CenterNavigator/images/overlay.png);
}
.popup_frame
{
    width: 100%;
    position: fixed;
    top: 30%;
}
.popup_box
{
    width:50%;
    margin: auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border:2px solid #000000;
    background-color:#999;
}
.popup_title
{
    border-radius: 20px 20px 0px 0px;
    background-color:#E3A20B;
    width: 98%;
    font-size: 270%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 1%;
}
.popup_heading
{
    width: 28%;
    float: left;
    font-weight: bold;
    font-size: 170%;
    text-align: right;
    padding: 1%;
}
.popup_item
{
    width: 68%;
    float: left;
    text-align: left;
    font-size: 170%;
    padding: 1%;
}
.popup_mesage
{
    width: 98%;
    float: left;
    text-align: left;
    font-size: 170%;
    padding: 1%;
}
.popup_1button
{
    width: 98%;
    float: left;
    text-align: center;
    padding: 1%;
}
.popup_2button
{
    width: 48%;
    float: left;
    text-align: center;
    padding: 1%;
}
.popup_3button
{
    width: 31.33333%;
    float: left;
    text-align: center;
    padding: 1%;
}
.popup_4button
{
    width: 23%;
    float: left;
    text-align: center;
    padding: 1%;
}

标记：

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>layout</title>
</head>
    <body>
        <div class="popup_overlay">
            <div class="popup_frame">
                <div class="popup_box">
                    <table><tbody><tr><td>
                        <div class="popup_title">title</div>
                        <div class="popup_heading">heading:</div>
                        <div class="popup_item">data</div>
                        <div class="popup_heading">heading:</div>
                        <div class="popup_item">data</div>
                        <div class="popup_4button">button1</div>
                        <div class="popup_4button">button2</div>
                        <div class="popup_4button">button3</div>
                        <div class="popup_4button">button4</div>
                    </td></tr></tbody></table>
                </div>
            </div>
        </div>
    </body>
</html>

在这里您去

<div class="popup_overlay">
        <div class="popup_frame">
            <div class="popup_box">
                <div class="popup_title">title</div>
                <div class="popup_heading">heading:</div>
                <div class="popup_data">data</div>
                <div style="clear:both"></div>
                <div class="popup_heading">heading:</div>
                <div class="popup_data">data</div>
                <div style="clear:both"></div>
                <div class="popup_button">button1</div>
                <div class="popup_button">button2</div>
                <div class="popup_button">button3</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

您的代码非常不受限制地编写。我整体重写了。

<div class="popup_box">
    <div class="popup_title">title</div>
    <div class="popup_content">
        <div class="popup_header">
            <span class="popup_heading">heading:</span>
            <span class="popup_item">data</span>
        </div>
        <div class="popup_header">
            <span class="popup_heading">heading:</span>
            <span class="popup_item">data</span>
        </div>
        <div class="popup_buttons">
            <div class="popup_4button">button1</div>
            <div class="popup_4button">button2</div>
            <div class="popup_4button">button3</div>
            <div class="popup_4button">button4</div>
        </div>
    </div>
</div>

我知道很多divs，但它仍然比您写的IMO要好。无需表，您需要更少的CSS：

.popup_overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0,0,0,0.12);
}
.popup_box {
    width:50%;
    margin: 50px auto;
    border-radius: 20px;
    border: 5px solid #333;
    background-color: #3D668F;
    box-shadow: 0 5px 20px rgba(0,0,0,0.32);
    overflow: hidden;
}
.popup_title {
    width: 98%;
    font-size: 270%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: white;
    padding: 1%;
}

.popup_heading, .popup_item  {
    font-weight: bold;
    font-size: 170%;
    padding: 1%;
}
.popup_item {font-weight: normal;}
.popup_4button {
    width: 23%;
    float: left;
    text-align: center;
    padding: 1%;
}

相关内容

最新更新

热门标签：