浮动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

然而，除了确保为父div定义css width之外似乎没有其他答案