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 browser. Setting a global percentage doesn’t work, since it’s basis is different. Setting a unitless value such as ‘1’ doesn’t work either. Is there some way to normalize this dimension?

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 <p> 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 <p> is 18 pixels.