IE6 和 7，奇怪的边距“继承”

Question

我知道双边距错误，但这是不同的......场景是有一个具有底部边距的元素，然后在它的正下方有一个包含浮动元素的元素（在最后被清除），容器元素可以说一个底部边框应该位于它包含的浮动元素的正下方。但是，即 IE7 和 6，底部边框与其内容的间距与其上方元素的底部边距完全相同。

这不是真正的继承，更多的是两次应用边距并且位置错误..这是一些回购代码：

<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;">
    <div style="float: left;">Hello world?</div>
    <div style="clear: left;"></div>
</div>

坚持在投诉页面中（我使用 xhtml 过渡），您会注意到边框没有出现在文本下方，而是距离它 50 像素...与“菜单”间隔相同的距离文字..

针对say.. IE8进行测试，边框正确地位于文本下方。

这是我之前注意到并设法忽略并解决的问题，但我想知道这个错误是否被命名，以及是否有解决它的好方法..

（我通常解决这个问题的方法是用填充来分隔 H1，但这并不总是合理的）。

Answer 1

您需要在外部 div 上调用 hasLayout 才能使 IE 正常显示。您可以通过向 div 或缩放添加宽度或高度来做到这一点：1。

这些也会清除您在 IE 中的浮动，因此您可以删除 <div style="clear: left;"></div>。要清除其他浏览器中的浮动，请使用 overflow:hidden;

<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;">
    <div style="float: left;">Hello world?</div>
</div>