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

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

114 голосов
/ 07 октября 2009

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

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

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

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

Ответы [ 13 ]

0 голосов
/ 21 января 2013

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

<sup style="font-size:9px; line-height:8px;">&reg;</sup>
0 голосов
/ 08 апреля 2011

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

0 голосов
/ 07 октября 2009

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

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

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

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

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

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

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

Страница:
...