html - 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 分配了一些额外的高度。 来自firebug的布局图如下:

为什么 div 的高度多了 2 个像素？为什么它会因浏览器而异？

• Firefox 12:额外增加 2 像素
• IE9:额外增加 0.26 像素
• Chrome:额外 0 像素。

这是一个 fiddle :http://jsfiddle.net/mWe5Y/

为什么会这样，我该如何摆脱那个额外的“高度”？

Answer 1

因为 img 是一个内联元素。

去除多余的高度:

.account-picture img {
    display: block;
}