CODEWITHSUNDEEP
cssxhtmlcross-browser
Jitendra Vyas
Jitendra Vyas

Reputation: 152855

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

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>

Upvotes: 4

Views: 1529

Answers (3)

snsr
snsr

Reputation: 11

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;
}

Upvotes: 1

reisio
reisio

Reputation: 3242

vertical-align: text-top;

Upvotes: 0

fuxia
fuxia

Reputation: 63596

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

Upvotes: 4

Related Questions