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

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 会将其视为空元素并且不会渲染它。而火狐却可以。为了避免这种情况，只需添加一个高度属性。像这样：

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