How to get cross browser ^{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>

Possible duplicate of [this](http://stackoverflow.com/questions/1530685/html-sup-tag-affecting-line-height-how-to-make-it-consistent) question. The [second answer](http://stackoverflow.com/a/6594576/564181) resolves the problem nicely. — Chris Krycho, Jun 03 '13 at 20:27

score 4 · Answer 1 · answered Apr 01 '10 at 12:24

4

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

answered Apr 01 '10 at 12:24

fuxia

Just use real superscript numbers. The CSS is helping browsers to find a font with these numbers. – fuxia Apr 01 '10 at 14:04

score 1 · Answer 2 · edited Dec 08 '11 at 22:24

1

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

If that doesn't work, you can take it a bit further..

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

edited Dec 08 '11 at 22:24

Pops

answered Jan 24 '11 at 22:17

snsr

score 0 · Answer 3 · answered May 06 '10 at 11:50

0

vertical-align: text-top;

answered May 06 '10 at 11:50

reisio

How to get cross browser without intrerupting line height?