Css - inline elements ignoring line height

Question

I find it hard to understand 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> 

Expected Result: The element's height should be 26px, but it is set to 31px. If I set the element lock, the height will be correctly set to 26 pixels.

Everything I read says that it should be set to the height of the line, so I can’t figure it out. Here is what I read on the W3C:

The height of each window of the built-in level in the line field is calculated. For replaced elements, inline block elements, and inline-table elements, this is the height of the field field; for inline boxes, this is their "line height" .

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

Answer 1

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

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

The height of the content area [inline elements] should be based on the font, but this specification does not indicate how to do this. UA can, for example, use an em-box or maximum clip and descender font ...

Different browsers just take a different approach here. See http://jsfiddle.net/ejqTD/1/ for an illustration of this. Note that webkit displays a higher content area, but the line length is still correct .

In this case, the content area exceeds the line field , which is allowed: http://www.w3.org/TR/CSS2/visudet.html#leading

if the height indicated by the "line height" is less than the height of the contents of the contained boxes, the backgrounds and colors of the indents and borders can "merge" into adjacent lines of lines.

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