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

Answer 1

Position is everything lists an IE line-height bug--but I don't think it's your problem.

Can you post a demo link?

Answer 2

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;
}