内联元素忽略行

2018-06-20 16:03:52

我无法弄清楚为什么内联元素忽略了某些浏览器中的line-height （Chrome和Firefox忽略它，但IE9没有）。

这里是一个例子：

<small style="line-height: 1; font-size: 26px;">Hello, World</small>

预期的结果是元素高度为26px，但是，它被设置为31px。如果我将元素的显示设置为阻止，则高度正确设置为26px。

我读过的所有内容都表明它应该设置为行高，所以我无法弄清楚这一点。以下是我在W3C上阅读的内容：

计算线框中每个内联级别框的高度。对于替换元素，行内块元素和行内表元素，这是其边距框的高度; 对于行内盒子，这是他们的'行高' 。

资料来源：http://www.w3.org/TR/CSS2/visudet.html#line-height

webkit检查员显示的内容（以及您在PhotoShop中测量的内容）是内容区域的尺寸。

请参阅http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

[内嵌元素]的内容区域的高度应该基于字体，但本规范并未指定方式。 UA可以，例如，使用em-box或字体的最大上行和下行...

不同的浏览器在这里简单地使用不同的方法。请参阅http://jsfiddle.net/ejqTD/1/以获取相关说明。请注意webkit如何呈现更高的内容区域，但行高仍然正确 。

在这种情况下， 内容区域超出了线框，这是允许的：http://www.w3.org/TR/CSS2/visudet.html#leading

如果'line-height'指定的高度小于包含框的内容高度，则填充和边框的背景和颜色可能会“流血”到相邻的线框中。

很容易看出你是否考虑line-height <1：http://jsfiddle.net/KKMmK/

链接地址: http://www.djcxy.com/p/58105.html