一尘不染

CSS-忽略行高的内联元素

css

我无法弄清楚为什么内联元素line-height在某些浏览器中会忽略(Chrome和Firefox会忽略它,但IE9不会)。

这是一个例子:

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

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

我读的所有内容都应该设置为行高,因此我无法弄清楚。这是我在W3C上阅读的内容:

计算行框中每个行内框的高度。对于替换的元素,内联块元素和内联表元素,这是它们的边距框的高度。 对于嵌入式盒,这是它们的’line-height’


阅读 363

收藏
2020-05-16

共1个答案

一尘不染

Webkit检查器显示的内容(以及您在PhotoShop中测量的 内容 )是 内容区域 的尺寸。

[内联元素]的内容区域的高度应基于字体,但是此规范未指定如何。UA可以例如使用em-box或字体的最大升序和降序…

在这里,不同的浏览器只是使用不同的方法。有关说明,。注意webkit如何呈现更高的内容区域,但是line-height仍然是正确的

如果“ line-height”指定的高度小于所包含框的内容高度,则填充的背景和颜色以及边框的颜色可能会“渗入”相邻的线框。

2020-05-16