HTML <sup /> тег, що впливає на висоту рядка, як зробити його послідовним?

Якщо у мене є <sup>тег у багаторядковому <p>тезі, рядок із надриском на ньому має більший інтервал між ним, ніж інші рядки, незалежно від того, яку висоту рядка я поставив на <p>.

Редагувати для уточнення : я не маю на увазі, що у мене є багато <p>s, кожен з яких знаходиться в одному рядку. У мене є сингл <p>з достатньою кількістю вмісту, щоб викликати загортання на кілька рядків. Десь (де завгодно) у тексті може бути <sup>або <sub>. Це впливає на висоту лінії для цього рядка, додаючи додатковий інтервал вище / знизу. Якщо я встановив велику висоту лінії на цьому, <p>це не має ніякої різниці для проблеми. Висота лінії збільшується, але зайвий інтервал все ще залишається.

Як я можу зробити його послідовним - тобто всі рядки мають однаковий інтервал, містять вони <sup>чи ні?

Ваші рішення повинні бути крос-браузером (IE 6+, FF, сафарі, опера, хром)

висота рядка це виправляє, але, можливо, доведеться зробити її досить великою: у моїх місцях розташування я повинен збільшити висоту рядка до приблизно 1,8, перш ніж вона <sup>більше не заважатиме, але це буде змінюватися від шрифту до шрифту.

Один з можливих підходів для отримання послідовних висот рядків - це встановлення власного стилю надширокості замість типового vertical-align: super. Якщо ви користуєтесь topцим, нічого не додаватимуть до рядка, але, можливо, доведеться додатково зменшити розмір шрифту, щоб він підходив:

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

Ще один злом, який ви можете спробувати, - це використовувати позиціонування, щоб трохи перемістити його вгору, не впливаючи на рядок рядка:

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

Звичайно, це ризикує потрапити в лінію вище, якщо у вас недостатня висота лінії.

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>висоту лінії у 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%), і ви вирівняєте його з серединою звичайного тексту (середина тексту), ви можете усунути проблему і отримати суперскрипт, схожий на індекс. Ось:

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 (я не можу говорити про інші браузери)

Я використовував висоту рядка: нормально для верхніх сценаріїв, що добре працює для мене в Safari, Chrome і Firefox, але я не впевнений у IE.

Спеціально використовуйте це в бюлетені -

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

Мені подобається рішення Мілінгу Кілу, але в тому ж дусі я вважаю за краще

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>