Question

也许我错过了一些东西，但我无法从我所知道的任何IE漏洞中解释这一点。为什么在这个例子中，<p>和<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>

Answer 1

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

保证金崩溃

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


Collapsing Margins

Uncollapsing Margins


在IE / Win中，这种情况永远不会发生   盒子有布局：似乎布局   防止孩子的边缘   伸出收纳箱。   此外hasLayout为真，   无论是在容器上还是在容器上   孩子，其他错误的边缘   计算显示：


Margin collapsing and hasLayout

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

为什么IE7中<p>和</p> <hr />之间的垂直边距不会崩溃

1 个答案:

保证金崩溃