我无法弄清楚为什么内联元素line-height在某些浏览器中会忽略(Chrome和Firefox会忽略它,但IE9不会)。
line-height
这是一个例子:
<small style="line-height: 1; font-size: 26px;">Hello, World</small>
预期结果是元素高度为26px,但是将其设置为31px。如果我将元素的显示设置为“阻止”,则高度正确设置为26px。
我读的所有内容都应该设置为行高,因此我无法弄清楚。这是我在W3C上阅读的内容:
计算行框中每个行内框的高度。对于替换的元素,内联块元素和内联表元素,这是它们的边距框的高度。 对于嵌入式盒,这是它们的’line-height’ 。
Webkit检查器显示的内容(以及您在PhotoShop中测量的 内容 )是 内容区域 的尺寸。
[内联元素]的内容区域的高度应基于字体,但是此规范未指定如何。UA可以例如使用em-box或字体的最大升序和降序…
在这里,不同的浏览器只是使用不同的方法。有关说明,。注意webkit如何呈现更高的内容区域,但是line-height仍然是正确的 。
如果“ line-height”指定的高度小于所包含框的内容高度,则填充的背景和颜色以及边框的颜色可能会“渗入”相邻的线框。