css - 这是哪个 CSS 错误？ (底部边距，ie6 + ie7)

Question

在 ie6 和 ie7 中，p 的 margin-bottom 被应用到 p 和 div 就在它下面。

换句话说，此代码将对 ie6 和 ie7 中的 p 和 div 应用 20px 的 margin-bottom。在任何版本的 FF、Opera、Chrome/Safari 或 ie8 中都没有问题。

<p style="margin-bottom: 20px;">Hello world!</p>
<div style="float: left; display: inline">
    Hello world, part deux.
</div>

当然，从 div 中删除 float 可以解决这个问题。这是哪个 ie/CSS 错误(如果有的话)，我应该搜索什么来找出如何修复它？

附注不幸的是，我无法为 div 分配宽度。

Answer 1

float: left 本质上会导致您的 DIV 容器被推到文档流中可能的最左上角位置。在这种情况下，由于前面的 P 标签没有 float ，因此忽略了 margin bottom。这会产生预期的效果，尽管代码不是很干净:

<p style="float: left; display: inline; margin-bottom: 20px;">Hello world!</p>
<div style="clear: left; float: left; display: inline">
    Hello world, part deux.
</div>

然而，理想的做法是简单地从您的元素中删除 float ，并让它们保持原样( block 级元素):

<p style="margin-bottom: 20px;">Hello world!</p>
<div>Hello world, part deux.</div>

也许我错过了这两个容器在您的案例中的预期效果。