不应用图像的CSS线高

Question

我在一个div中有一个图像，让我们这样说：

<div>
<img src="myimage.png">
</div>

对于div的样式，是线高:36 is；

图像的高度是12 is

这段代码存在于许多网站上(比如按钮/徽章等等)--它基本上总是有效的。但有时div会在图像周围塌陷，我试图找出原因。

如果我把一个 放在图像旁边，线的高度又开始工作了.

将图像设置为内联，为div提供特定的字体大小，似乎没有什么区别。

Answer 1

将新样式应用于div：

<div style="display:list-item;"></div>

愿这对你有帮助。

Answer 2

可能是因为img被设置为display:block。在这种情况下，没有任何东西可以形成行框。如果没有线框，就没有适用于线高的东西。

可能浮动的img也可能会混淆这件事，因为这也将不会留下任何创建行框。但是在这种情况下，div将折叠到0高度，而不是仅仅围绕图像。

请参阅http://jsfiddle.net/p6Jzt/1/

Answer 3

试试div { font-size: 0; }，它的高度必须与它的线高相同。

positioned 2 pixels below where they should be?