css - HTML <sup /> tag affecting line height, how to make it consistent?

Question

If I have a <sup> tag in a multi-line <p> tag, the line with the superscript on it has a larger line spacing above it than the other lines, irregardless of what line-height I put on the <p>.

Edit for clarification: I don't mean i have lots of <p>s, each which is on a single line. I have a single <p> with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a <sup> or <sub>. This affects the line height for that line by adding extra spacing above/below. If I set a larger line-height on the <p> this makes no difference to the problem. The line-height is increased, but the extra spacing still remains.

How can I make it consistent - i.e. all lines have the same spacing whether they contain a <sup> or not?

Your solutions must be cross-browser (IE 6+, FF, safari, opera, chrome)

Answer 1

line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup> no longer interferes with it, but this will vary from font to font.

One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

sup { vertical-align: top; font-size: 0.6em; }

Another hack you could try is to use positioning to move it up a bit without affecting the line box:

sup { vertical-align: top; position: relative; top: -0.5em; }

Of course this runs the risk of crashing into the line above if you don't have enough line-height.