css - 忽略行高的内联元素 [英] css - inline elements ignoring line-height

问题描述

我有麻烦找出为什么内联元素忽略 line-height 在一些浏览器（Chrome和Firefox忽略它，但IE9不）。

I'm having trouble figuring out why inline elements ignore line-height in some browsers (Chrome and Firefox ignore it, but IE9 does not).

以下是一个示例：

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

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

The expected result is for the element height to be 26px, however, it's being set to 31px. If I set the element's display to block, the height is correctly set to 26px.

我读到的所有内容都应该设置为行高， t这一个出来。这是我在W3C上阅读的内容：

Everything I read says it's supposed to be set to the line height, so I can't figure this one out. Here is what I read on W3C:

计算行框中每个行内级别框的高度。对于替换的元素，inline-block元素和inline-table元素，这是其边框的高度; 对于行内框，这是其行高。

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

Source: http://www.w3.org/TR/CSS2/visudet.html#line-height

推荐答案

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

What webkit inspector shows (and what you measured in PhotoShop) is the content area's dimensions.

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

内容区域[内嵌元素]的高度应基于字体，但本规范不指定如何。 UA可以例如使用电子邮件箱或字体的最大上升器和下降器...

The height of the content area [of inline elements] should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font...

不同的浏览器只使用这里有一个不同的方法。有关说明，请参见 http://jsfiddle.net/ejqTD/1/ 。请注意webkit如何呈现更高的内容区域，但行高仍然正确。

Different browsers simply use a different approach here. See http://jsfiddle.net/ejqTD/1/ for an illustration of that. Note how webkit renders a higher content area, but line-height is still correct.

内容区域超出行框，在这种情况下，这是允许的： http：//www.w3。如果由'line-height'指定的高度小于或等于'line-height'，则

The content area exceeds the line box in this case, which is permitted: http://www.w3.org/TR/CSS2/visudet.html#leading

if the height specified by 'line-height' is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.

这是很容易看到的内容框，内容的高度，填充和边框的背景和颜色可能流血如果考虑线高度1： http://jsfiddle.net/KKMmK/

It's easy to see if you consider line-heights < 1: http://jsfiddle.net/KKMmK/

这篇关于css - 忽略行高的内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！