为什么在IE7中和<hr>之间的垂直边距不会塌陷答案

【问题标题】：Why won't the vertical margins between and <hr> collapse in IE7为什么在IE7中和<hr>之间的垂直边距不会塌陷
【发布时间】：2014-01-14 23:57:14
【问题描述】：

也许我遗漏了一些东西，但我无法从我所知道的任何 IE 错误中解释这一点。为什么在此示例中 和<hr> 元素的边距在符合标准的浏览器（即 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>

【问题讨论】：

标签： css internet-explorer-7 internet-explorer-6 margin

【解决方案1】：

这与hasLayout bug 有关。以下是相关性摘录：

边距折叠

hasLayout MS 属性会影响 collapsing 框之间的边距及其后代。根据指定框的上边距，没有顶部填充和没有顶部边框应该与它的上边缘崩溃第一个流入块级子级：

Collapsing Margins

Uncollapsing Margins

在 IE/Win 中，当盒子有布局：似乎布局防止孩子的边缘伸出收容箱。此外，当hasLayout 为真时，无论是在容器上还是在孩子，其他错误的边距计算出现：

Margin collapsing and hasLayout

最好的解决方案很简单，但在现有设计上可能很激烈：将块元素的边距设置为 0 并改用填充，以便在浏览器中保持一致。填充不会折叠。

【讨论】：

谢谢，首先我在尝试通过 give 我的元素布局来解决此问题时误应用了 has-layout 修复程序。无论如何，提供布局比删除它更容易！关于您的解决方案：我将无法使用填充选项。虽然我没有在我的原始问题中指定它，但我需要  元素具有背景色，并与 <hr> 元素隔开一个边距。
丑陋，但有效：相应地使用 。背景给出了元素布局，既然你需要它......
好的，hasLayout 解释是关键。我没有试图直接解决这个问题，但接受了我不能指望在这种情况下利润会崩溃。我所做的只是从相关的<hr> 元素中删除所有边距，并且只将边距应用于 元素。与FF3/IE8 相比，在IE7 中查看时仍然有一点扩展，但还不足以破坏布局。谢谢