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

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

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

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

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

line-height исправляет это, но вам, возможно, придется сделать его довольно большим: в моих настройках я должен увеличить 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; }

Конечно, это рискует попасть в строку выше, если у вас недостаточно line-height.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

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

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

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

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

будь проще:

sup { vertical-align: text-top; }

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

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

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

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

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

 p
    {
            line-height: 135%;
    }

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

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

Я предпочитаю предлагаемое здесь решение , как показано на примере jsfiddle :

CSS:

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

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

Прелесть этого решения в том, что вы можете настроить вертикальное расположение верхнего и нижнего индекса, чтобы избежать каких-либо столкновений с линией выше или ниже ... в приведенном выше примере просто увеличьте или уменьшите в 0.2emсоответствии с вашими требованиями.

Чтобы сделать все строки выше , чтобы они выглядели так же, как строка с надстрочным индексом, задайте больший размер line-heightдля всего абзаца.

<p style='line-height:150%'>

или любое другое значение, которое дает желаемый эффект.

Это может показаться странным, но вы так описали свои требования.

РЕДАКТИРОВАТЬ: чтобы все линии выглядели одинаково, когда только одному нужно больше вертикального пространства, чем другим , ВСЕ строки в абзаце должны быть выше.

Это, как я уже сказал, не может быть привлекательным решением. Может быть, что-то можно сделать с диапазоном, уменьшив только текст с нижним / верхним индексом , кроме этого, я не верю, что то, что вы хотите, может быть достигнуто. Но хотелось бы увидеть чужое решение.

EDIT2: кстати, я пробовал небольшой файл HTML, содержащий

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

И все строки одинаковой высоты в FF3.0.14 и Konqueror (я не могу говорить о других браузерах)

Я использовал line-height: normal для надстрочного индекса, который у меня отлично работает в Safari, Chrome и Firefox, но насчет IE я не уверен.

Специально используйте это в рассылке новостей -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

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

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

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

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

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