为什么
之间的垂直边距不相等？和
IE7 中崩溃
也许我遗漏了一些东西，但我无法从我所知道的任何 IE 错误中解释这一点。为什么在此示例中
和
元素的边距在符合标准的浏览器（即 FF3、IE8 等）中按预期折叠，但不折叠在IE7（包括IE8兼容模式）下？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE7 Box Model</title>
<style type="text/css">
p {
border: 1px solid #00f;
background-color: #fefecb;
margin: 20x 0 20px 0;
}
hr {
margin: 20px 0 20px 0;
}
</style>
</head>
<body>
<p>
box 1
</p>
<hr />
<p>
box 2
</p>
<hr />
<p>
box 3
</p>
</body>
</html>
Perhaps I am missing something, but I can't explain this from any IE bug I know of. Why in this example do the margins of the <p> and <hr> elements collapse as expected in standards compliant browsers (i.e. FF3, IE8, etc) but not in IE7 (including IE8 compatibility mode)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE7 Box Model</title>
<style type="text/css">
p {
border: 1px solid #00f;
background-color: #fefecb;
margin: 20x 0 20px 0;
}
hr {
margin: 20px 0 20px 0;
}
</style>
</head>
<body>
<p>
box 1
</p>
<hr />
<p>
box 2
</p>
<hr />
<p>
box 3
</p>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这与 hasLayout 错误有关。以下是相关性的摘录：
最好的解决方案很简单，但对现有的可能是激烈的设计：将块元素的边距设置为
0并使用填充，以便在浏览器中保持一致。衬垫不会塌陷。This is related to the hasLayout bug. Here's an extract of relevance:
The best solution is simple but maybe drastic on existing designs: set margins on block elements to
0and use padding instead so that it's consistent across the browsers. Paddings won't collapse.