Html css中的格式化框在JSFIDLE中工作，但在Chrome中不是独立的_Html_Css

Html css中的格式化框在JSFIDLE中工作，但在Chrome中不是独立的

html css

Html css中的格式化框在JSFIDLE中工作，但在Chrome中不是独立的,html,css,Html,Css,我制作了一个弹出窗口，需要以多种不同的方式进行格式化：它在jsfiddle.net中显示良好，但当您将代码放入文件并通过chrome查看时，它不起作用，因为popup\u项目与popup\u标题的大小不同我的问题是，我做得对吗，还是应该用另一种方式为什么它在jsfiddle.net中显示得很好，但在chrome中却没有，我正在使用chrome来查看jsfiddle.net，它不应该显示相同的内容吗 .popup_box table {width:100%;} 以下是发布在JSFIDLE

我制作了一个弹出窗口，需要以多种不同的方式进行格式化：

它在jsfiddle.net中显示良好，但当您将代码放入文件并通过chrome查看时，它不起作用，因为

popup\u项目

与

popup\u标题

的大小不同

我的问题是，我做得对吗，还是应该用另一种方式

为什么它在jsfiddle.net中显示得很好，但在chrome中却没有，我正在使用chrome来查看jsfiddle.net，它不应该显示相同的内容吗

.popup_box table
{width:100%;}

以下是发布在JSFIDLE中的代码：

CSS:

标记：

<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>


布局
标题
标题：
数据
标题：
数据
按钮1
按钮2
按钮3
按钮4

给你

<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>


标题
标题：
数据
标题：
数据
按钮1
按钮2
按钮3

你的代码写得很不文雅。我认为这是一个整体

<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>

我将您确切的JSFIDLE代码放入HTML中，在Chrome（v22）中打开它，结果显示相同。可能是quirksmode渲染的问题？在

中没有表
。弹出框

，您确定正确吗？谢谢，我喜欢这个，它工作得很好。问题“弹出按钮”没有使用，它只是一个容器吗？@user1658688 Jup，它只是一个容器，可以很好地概述您的代码。

<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>

.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%;
}