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

Question

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

换句话说，此代码将在 ie6 和 ie7 中将 20px 的 margin-bottom 应用于 p 和 div。在任何版本的 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 ，因此忽略边距底部。这将达到预期的效果，尽管代码不是很干净:

<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>

也许我缺少这两个容器在您的案例中的预期效果。