浮动div中的图像:最小高度= font- height /line-height？

Question

有人能解释一下这个标记的原因吗：

<div style="border: 1px solid gray; float: left;">
    <img src="fooImage.png" style="height: 2px; width: 2px;" />
</div>

呈现一个大约2x18的浮动div (在Chrome/Firefox中)，而不是2x2的div？

即使删除了所有的空格，图像似乎也遵循font-size/line-height，而不是其内容的height ( img)。

小提琴：http://jsfiddle.net/26BSb/2/

Answer 1

这对Different rendering from Chrome and Firefox when having floated children in a floated div with no width.来说很熟悉

一种建议是将浮动父对象的css width设置为width:auto

但是，除了确保为父width定义css div之外，似乎没有其他解决方案。