How to get cross browser <sup> without built-in line height?

Question

How to get cross browser <sup> without breaking line height?

I tried vertical-align:top , but it looks fine in FF 3.6 and IE, but not in FF 3.0.

How to get a consistent size (excellent text size) and <sup> position are identical in all browsers without interrupting line height.

Am I using <sup> to indicate footnotes? do not show power

 <p> Stackoverflow is killing<sup>10</sup> experts-exchange</p> 

Answer 1

Your best chance for consistent rendering is real superscripts:

HTML

 <p>Stackoverflow is killing<span class="unicode">¹⁰</span> experts-exchange</p> 

CSS

 .unicode { font-family: 'Lucida Sans Unicode', 'DejaVu Sans', 'Arial Unicode MS'; } 

Live

Stackoverflow kills¹⁰ expert-exchange

Answer 2

 sup { vertical-align: super; height: 0; line-height: 1; } 

If this does not work, you can do it a little further.

 sup{ height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; bottom: 1ex; } 

Answer 3

  vertical-align: text-top;