Div无缘无故地获得额外的高度

Question

我有一些像这样的标记:

<div class="account-picture">
    <img src="http://i.imgur.com/Mcr3l.png">
</div>

将div要向左浮动的需求.图像为128px x 128px.

还有一些css:

.account-picture{
   float: left;
   background: #FFFFFF;
   padding: 10px;
   border: 1px solid red;
   font-size: 1px;
   overflow: hidden;
}

img{
   border: 1px solid #F8F8F8;
   overflow: hidden;
}

但问题是似乎有一些额外的高度分配给div.萤火虫的布局图如下:

为什么div的高度增加2个像素？为什么浏览器会有所不同？

• Firefox 12:2px额外
• IE9:0.26px额外
• Chrome:0px额外.

这是一个小提琴:http://jsfiddle.net/mWe5Y/

为什么会发生这种情况,如何摆脱额外的"高度"？

Answer 1

因为img是一个内联元素.

要摆脱那个额外的高度:

.account-picture img {
    display: block;
}