空块元素（例如： <div> s）在Chrome和Firefox中的呈现方式不同; 什么时候发生，谁是对的？

Question

此页面在Firefox和Chrome中的呈现方式不同。

码

<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>
<div style="margin-bottom: 1em; overflow: auto;"></div>
<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>

<p style="border: solid 1px red">Test test</p>

Firefox，Opera，Internet Explorer

alt text http://koper.wowpanda.net/firefoxr.PNG

铬

alt text http://koper.wowpanda.net/chromer.PNG

问题

1. 谁是对的？ Firefox还是Chrome？
2. 什么时候发生？ 例如，如果我添加padding: 1px然后突然Chrome也会添加底部边距。 如果我在div内容中添加一些东西（任何东西）也一样。
3. 是否有任何CSS / Javascript黑客攻击使两个浏览器显示相同而不修改HTML？

Answer 1

<div style="margin-bottom: 1em; overflow: auto;"></div> 

你需要在这里指定一个高度。

如果你没有chrome将它视为空元素并且不渲染它。 而firefox确实如此。 要避免这种情况，只需添加一个height属性。 像这样：

<div style="margin-bottom: 1em; overflow: auto; height:1px;"></div>