Пустые блочные элементы (например: <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

альтернативный текст http://koper.wowpanda.net/firefoxr.PNG

Chrome

альтернативный текст 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 делает. Чтобы избежать этого, просто добавьте атрибут высоты. вот так:

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