Empty block elements (ex: <div>s) are rendered differently in Chrome and Firefox; when does it happen and who is right?

Question

This page renders differently in Firefox and Chrome.

Code

<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

Chrome

Questions

1. Who is right? Firefox or Chrome?
2. When does it happen exactly? For example if I add padding: 1px then suddenly Chrome will add the bottom margin too. Same thing if I add something (anything) in the div contents.
3. Is there any CSS/Javascript hack to make both browsers display it the same without modifying the HTML?

Answer 1

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

You need to specify a height here.

If you don't chrome treats it as an empty element and does not render it. Whereas firefox does. To avoid this just add a height attribute. like so:

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