FireFox 3 line-height

Question

Firefox 3 has introduced a new behavior in which line-height, when unset, differs from how other browsers render it. Thus, a critical section maybe render too high in that b

Answer 1

The computed value of line-height: normal varies between platforms, browsers (and different versions of the same browser, as you state), fonts, and even different sizes of the same font (see Eric Meyer's article).

Setting a unitless value such as...

body {line-height: 1.2;}

...should work to normalize the spacing between browsers. If this is not working, can you provide a more-detailed description of your stylesheet?

It's hard (impossible?) to get "pixel-perfect" results, but in order to get results that are as predictable as possible, I try to use a line height that produces a nice round value when multiplied by the font-size. We can't know the user agent's default font size, but 16 pixels is somewhat common.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

If the user agent's starting font size is indeed 16 pixels then the line height of 1.5 comes out to a nice, even 24 pixels. Users can and do change the default font size or the page zoom, though, and different browsers have different methods of scaling the page. Nevertheless, I think I've had reasonable success for a majority of the users. If I can't make the line height come out exactly, then I shoot for a little above the integer rather than a little below, because some browsers seem to truncate values rather than round them.

Also, note that if you use a percentage for the line height, it behaves differently when the value is inherited.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

Starting from a base font size of 16 pixels, the line height will be 24 pixels. Within a

element the font size becomes 12 pixels, but the line height does not become 18 pixels, rather it remains 24 pixels. This is the difference between line-height: 1.5 and line-height: 150%. When body {line-height: 1.5;} is used, the line height for

is 18 pixels.