html - float div 中的图像 : minimum height = font-height/line-height?

Question

有人可以解释为什么这个标记:

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

呈现大约 2x18 的 float div(在 Chrome/Firefox 中)而不是 2x2 div？

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

fiddle :http://jsfiddle.net/26BSb/2/

Answer 1

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

一个建议是将 float parent 的 css width 设置为 width:auto

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