inline elements ignoring line

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

Here is an example:

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

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.

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:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height' .

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

---

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

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

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, eg, use the em-box or the maximum ascender and descender of the font...

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 .

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.

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

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

上一篇: C＃：更改实体框架的检索数据类型

下一篇: 内联元素忽略行