我无法弄清楚为什么内联元素会line-height在某些浏览器中忽略(Chrome和Firefox会忽略它,但IE9不会忽略它).
这是一个例子:
<small style="line-height: 1; font-size: 26px;">Hello, World</small>
预期的结果是元素高度为26px,但是,它被设置为31px.如果我将元素的显示设置为块,则高度正确设置为26px.
我读到的所有东西都说应该设置为线高,所以我无法想出这个.这是我在W3C上看到的内容:
计算行框中每个内联级别框的高度.对于替换元素,内联块元素和内联表元素,这是其边距框的高度; 对于内联盒子,这是他们的"线高".
Webkit检查器显示的内容（以及您在PhotoShop中测量的内容）是内容区域的尺寸。
参见http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced
[内联元素]的内容区域的高度应基于字体，但是此规范未指定如何。UA可以例如使用em-box或字体的最大升序和降序...
在这里，不同的浏览器只是使用不同的方法。有关说明，请参见http://jsfiddle.net/ejqTD/1/。注意webkit如何呈现更高的内容区域，但是line-height仍然是正确的。
所述内容区域超过了线箱在这种情况下，这是允许的：http://www.w3.org/TR/CSS2/visudet.html#leading
如果“ line-height”指定的高度小于所包含框的内容高度，则填充的背景和颜色以及边框的颜色可能会“渗入”相邻的线框。
很容易看出您是否考虑行高<1：http : //jsfiddle.net/KKMmK/