我有以下HTML/CSS代码的问题:
CSS
* { padding: 0; margin: 0; border: none; outline: none; }
#container {
margin: 10px auto 10px auto;
width: 960px;
background-color: #dddddd;
border: solid 1px black;
}
#container2 {
margin-left: 200px;
margin-top: 400px;
background-color: yellow;
}
HTML
<body>
<div id="container">
<div id="container2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
示例页面看起来像我期望的那样,即较低的div(黄色)从外部div(灰色)的顶部边框向下推动400px.但是,当您border: solid 1px black;从样式定义中删除行时#container,外部div(灰色)从与内部div(黄色)相同的顶部位置开始.这种情况发生在Firefox 3.x和Chrome中.有人能解释为什么会这样吗？在我看来,删除边框样式不应该影响这种布局.