Line-height in IE vs. Firefox

Question

I have an H1 with a defined font-size and line-height and zero padding and margin. However, the result in IE has an extra pixel of padding on the top before the text starts, even though the element still takes up the same vertical space.

Is there an inconsistency in how line-height is rendered across browsers?

styles:

h1, h1 a { font-size:32px; line-height:44px; margin:0px;padding:0px;border:0px;}

thanks

score 3 · Answer 1 · answered Mar 03 '09 at 13:12

You haven't set a height for the H1 element, the height of the rendered element was dependent on the text being rendered.

In FF, without setting height, two different H1's were rendered at differing heights, 40 vs 44 px, due to different character heights, after setting height, both elements rendered as expected. (Differences in FF vs IE text renderer would account for the discrepancy you found.)

The line-height property will only determine where the text is positioned vertically within a notional box surrounding the height of the font. (including ascenders (f) and descenders (q)).

Forcing the height & line-height the same enables the browser to place the text box at the same position no matter the text content.

h1, h1 a { 
    font-size:32px; 
    line-height:44px;
    height:44px;       /* ++ */
    margin:0px;
    padding:0px;
    border:0px;
}

Thanks garrow - the problem is that the H1 needs to wrap onto multiple lines if needed, I can't set an explicit height on it. — Nathan, Mar 03 '09 at 14:46
doh! you may have to resort to browser targeting for this one then. — garrow, Mar 03 '09 at 21:54

score 1 · Answer 2 · edited May 30 '19 at 19:47

This may also be an vertical metrics issue. If the font itself has poor vartical metrics it will never align right. The only way to get the font rendered consistently across browsers is to fix its vertical metrics.

Most font providers allow you to update and fix vertical metrics of a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments.

More on that: Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

Line-height in IE vs. Firefox

styles:

2 Answers2