我制作了一个需要以多种不同方式格式化的弹出窗口: click here to see
它在 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>
关于html - css 中的格式化框在 jsfiddle 中有效，但在 Chrome 中不是独立的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12989359/