Why is my text being cut off in IE7?

Question

The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn't) it has been placed in a smaller element with overflow: hidden;.

Anyone know how to remedy this?

Answer 1

You need to specify the line height to match the font size...

CSS

h1 {
   font-size: 2em;
   line-height: 2em; /* or 100% */
}

See also IE7 is clipping my text. How do I adjust its attitude?