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

Question

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

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

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

I'm using <sup> to indicate footnote? not to show power

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

Answer 1

Your best chance for a consistent rendering are 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 is killing¹⁰ experts-exchange

Answer 2

vertical-align: text-top;