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

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

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

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

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

ОТВЕТЫ

Ответ 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; }

Конечно, это может привести к сбою в строке выше, если вам не хватает высоты строки.

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

сохранить это легко:

sup { vertical-align: text-top; }

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

Ответ 5

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

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

Ответ 6

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

 p
    {
            line-height: 135%;
    }

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

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

Ответ 7

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

Ответ 8

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

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

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

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

EDIT: чтобы все строки выглядели одинаково, когда только одному нужно больше вертикального пространства, чем другие, ВСЕ строки в абзаце должны быть выше.

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

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 (я не могу говорить для других браузеров)

Ответ 9

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

Ответ 10

Специально используйте это в информационном бюллетене -

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

Ответ 11

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

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

Ответ 12

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