Geek Answers Handbook

Empty block elements (for example: <div> s) are displayed differently in Chrome and Firefox; when does this happen and who is right?

This page is different in Firefox and Chrome.

the 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

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

Chrome

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

Questions

  • Who is right? Firefox or Chrome?
  • When does this happen exactly? For example, if I add padding: 1px, then Chrome will also add a lower limit. The same thing if I add something (anything) to the contents of the div.
  • Is there any CSS / Javascript hack so that both browsers render it the same without changing the HTML?
+5
source share
1
<div style="margin-bottom: 1em; overflow: auto;"></div>

.

. firefox . , . :

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

More articles:


All Articles