html - 空 block 元素(例如 : <div>s) are rendered differently in Chrome and Firefox; when does it happen and who is right?

Question

This page在 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

Chrome

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

问题

1. 谁是对的？ Firefox 还是 Chrome？
2. 具体什么时候发生？例如，如果我添加 padding: 1px 那么 Chrome 也会突然添加底部边距。如果我在 div 内容中添加一些东西(任何东西)也是一样。
3. 是否有任何 CSS/Javascript hack 可以在不修改 HTML 的情况下使两种浏览器显示相同？

Answer 1

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

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

如果您不这样做，chrome 会将其视为空元素并且不会呈现它。而火狐则可以。为避免这种情况，只需添加一个高度属性。像这样:

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