Как получить кросс-браузер <sup>без нарушения высоты строки?

Question

Как получить кросс-браузер <sup> без прерывания по высоте строки?

Я пытался vertical-align:top, но в FF 3.6 и IE он выглядит нормально, но не в FF 3.0.

Как добиться согласованности по размеру (размеру превосходного текста) и позиции <sup>, одинаковой во всех браузерах, не прерывая высоту строки.

Я использую <sup> для обозначения сноски? не показывать силу

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

Answer 1

Ваш лучший шанс для последовательного рендеринга - реальные верхние индексы:

HTML

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

CSS

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

Живите

Stackoverflow убивает¹⁰ обмен экспертами

Answer 2

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

Если это не сработает, вы можете пойти немного дальше ..

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

Answer 3

vertical-align: text-top;