这是哪个CSS bug？ （margin-bottom，ie6 + ie7）

Question

在ie6和ie7中，margin-bottom中的p正在应用于p和div正下方。

换句话说，此代码会将margin-bottom 20px应用于ie6和ie7中的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中移除浮动可以解决问题。哪个ie / CSS bug是这个，如果有的话，我应该搜索什么来弄清楚如何解决它？

P.S。不幸的是，我无法为div分配宽度。

Answer 1

float：left 实际上会导致您的DIV容器被推到文档流程中可能的最左上方位置。在这种情况下，由于先前的 P 标记未浮动，因此忽略边距底部。虽然不是很干净的代码，但这会产生预期的效果：

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

然而，理想的做法是简单地从元素中移除浮动并保留它们的预期（块级元素）：

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

也许我在你的情况下错过了这两个容器的预期效果。

Answer 2

我想你可能会遇到issue explained here。不幸的是，部分修复方法是给<div>一个宽度并使其成为display: inline，这是你不能做或已经完成的事情。也许它会帮助你理解它为什么会发生......