HTML тег <sup />, влияющий на высоту строки, как сделать его согласованным?

Question

Если у меня есть тег <sup> в многострочном теге <p>, то строка с верхним индексом имеет больший межстрочный интервал над ним, чем другие строки, независимо от того, какую высоту строки я добавлю <p>.

Редактировать для уточнения : Я не имею в виду, что у меня много <p> с, каждая из которых находится в одной строке. У меня есть один <p> с достаточным количеством содержимого, чтобы вызвать перенос на несколько строк. Где-то (где угодно) в тексте может быть <sup> или <sub>. Это влияет на высоту линии для этой линии, добавляя дополнительный интервал выше / ниже. Если я установлю большую высоту строки на <p>, это не будет иметь значения для проблемы. Высота строки увеличивается, но дополнительный интервал остается.

Как я могу сделать это согласованным - т.е. все строки имеют одинаковый интервал, независимо от того, содержат они <sup> или нет?

Ваши решения должны быть кросс-браузерными (IE 6+, FF, Safari, Opera, Chrome)

Answer 1

line-height это исправляет, но вам, возможно, придется сделать его довольно большим: в моих настройках мне нужно увеличить высоту строки примерно до 1,8, прежде чем <sup> больше не мешает ему, но это будет отличаться от шрифта к шрифту.

Один из возможных подходов для получения согласованной высоты строк - установить собственный стиль надстрочного индекса вместо значения по умолчанию vertical-align: super. Если вы используете top, это ничего не добавит к строчному блоку, но вам, возможно, придется уменьшить размер шрифта, чтобы подогнать его под размер:

sup { vertical-align: top; font-size: 0.6em; }

Еще один хак, который вы можете попробовать, - это использовать позиционирование, чтобы немного поднять его, не затрагивая линейный блок:

sup { vertical-align: top; position: relative; top: -0.5em; }

Конечно, это рискует врезаться в строку выше, если вам не хватает высоты строки.

Answer 2

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

Хитрость в том, чтобы установить высоту строки <sup> в 0. @Scott сказал, что использует normal, но это не всегда работает.

Это означает, что вам не нужно изменять высоту строки окружающего текста для размещения текста надстрочного индекса. Я проверял это в IE7 + и других основных браузерах.

Answer 3

У меня была такая же проблема, и ни один из приведенных ответов не сработал. Но я нашел git commit с исправлением, которое сработало для меня:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Answer 5

Причина, по которой тег <sup> влияет на расстояние между двумя строками, связана с рядом факторов. Факторами являются: высота строки, размер надстрочного индекса по отношению к обычному шрифту, высота строки надстрочного индекса и, наконец, что не менее важно, что является нижней частью надстрочного индекса, выравниваемого по ... Если вы установите ... высоту строки обычного текста в «туннельной полосе» (это я так называю) в 135%, то обычный текст (100%) будет дополнен белым на 35% больше белого. Для абзаца это выглядит так:

 p
    {
            line-height: 135%;
    }

Если вы не добавляете белый верх надстрочного индекса ... (т.е. сохраняете его высоту строки равным 0), верхний индекс имеет только ширину своего собственного текста ... если вы тогда попросите верхний индекс быть процентом от обычного шрифт (например, 70%), и вы выравниваете его по середине обычного текста (text-middle), вы можете устранить проблему и получить верхний индекс, который выглядит как верхний индекс. Вот оно:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 6

Я предпочитаю использовать length для выравнивания по вертикали. Это выравнивает базовую линию элемента на заданную длину выше базовой линии его родителя.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 7

будь проще:

sup { vertical-align: text-top; }

[ размер шрифта в зависимости от вашего индивидуального типа лица]

Answer 8

Ответ от здесь , работает как в phantomjs, так и во встроенном в электронную почту HTML:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

Answer 9

& sup1, & sup2 и т. Д. Могут помочь. это HTML трюк с надстрочным индексом

Answer 10

Мне нравится решение Milingu Kilu, но в том же духе я предпочитаю

sup { vertical-align:top; line-height:100%; }