Here is an example of some markup:
<div class="account-picture">
<img src="http://i.imgur.com/Mcr3l.png">
</div>
The div should be floated to the left and the image size is 128px x 128px.
Below is the CSS that goes along with it:
.account-picture{
float: left;
background: #FFFFFF;
padding: 10px;
border: 1px solid red;
font-size: 1px;
overflow: hidden;
}
img{
border: 1px solid #F8F8F8;
overflow: hidden;
}
There seems to be some mystery height being added to the div element. The height inconsistencies can be seen in the following layout diagrams when inspected using Firebug:
Why does the height of the div have additional pixels? And why does it vary between different browsers?
- Firefox 12: 2px extra
- IE9: 0.26px extra
- Chrome: 0px extra
For further investigation, a JSFiddle has been provided here: http://jsfiddle.net/mWe5Y/
If you know the reason behind this issue and how to remove the extra height, please let me know!