Znacznik HTML <sup /> wpływający na wysokość wiersza, jak sprawić, by był spójny?

Jeśli mam <sup>znacznik w znaczniku wieloliniowym <p>, wiersz z indeksem górnym ma większy odstęp między wierszami nad nim niż inne wiersze, niezależnie od wysokości linii, którą umieściłem w <p>.

Edytuj dla wyjaśnienia : nie mam na myśli, że mam wiele <p>s, z których każdy jest w jednym wierszu. Mam singiel <p>z wystarczającą zawartością, aby spowodować zawijanie w wielu wierszach. Gdzieś (gdziekolwiek) w tekście może znajdować się <sup>lub <sub>. Wpływa to na wysokość linii dla tej linii, dodając dodatkowe odstępy powyżej / poniżej. Jeśli ustawię większą wysokość linii, <p>nie ma to znaczenia dla problemu. Wysokość linii jest zwiększona, ale dodatkowe odstępy pozostają.

Jak mogę to uczynić spójnym - tj. Wszystkie linie mają takie same odstępy, niezależnie od tego, czy zawierają znak, <sup>czy nie?

Twoje rozwiązania muszą działać w różnych przeglądarkach (IE 6+, FF, safari, opera, chrome)

line-height to naprawia, ale być może będziesz musiał zrobić to dość duże: w moich ustawieniach muszę zwiększyć wysokość linii do około 1,8, zanim <sup>przestanie to przeszkadzać, ale będzie się to różnić w zależności od czcionki.

Jednym z możliwych sposobów uzyskania spójnych wysokości linii jest ustawienie własnego stylu indeksu górnego zamiast domyślnego vertical-align: super. Jeśli topgo użyjesz , nie doda niczego do pola liniowego, ale może być konieczne dalsze zmniejszenie rozmiaru czcionki, aby pasowała:

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

Innym hackem, którego możesz spróbować, jest użycie pozycjonowania, aby przesunąć go nieco w górę bez wpływu na linię:

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

Oczywiście stwarza to ryzyko uderzenia w powyższą linię, jeśli nie masz wystarczającej wysokości linii.

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;
}

Sztuczka polega na ustawieniu <sup>wysokości linii na 0. @Scott powiedział, że używa normalnego, ale to nie zawsze działa.

Oznacza to, że nie musisz zmieniać wysokości wiersza otaczającego tekstu, aby pomieścić tekst z indeksem górnym. Przetestowałem to w IE7 + i innych głównych przeglądarkach.

Miałem ten sam problem i żadna z podanych odpowiedzi nie zadziałała. Ale znalazłem zobowiązanie git z poprawką, która działała dla mnie:

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

zachowaj spokój:

sup { vertical-align: text-top; }

[ rozmiar czcionki zależny od indywidualnego kroju czcionki ]

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

Wolę rozwiązanie sugerowane tutaj , czego przykładem jest ten 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>.

Piękno tego rozwiązania polega na tym, że możesz dostosować pionowe położenie indeksu górnego i dolnego, aby uniknąć kolizji z linią powyżej lub poniżej ... w powyższym, po prostu zwiększ lub zmniejsz, 0.2emaby dopasować do swoich wymagań.

Wolę używać lengthna wyrównaniu w pionie. Spowoduje to wyrównanie linii bazowej elementu na danej długości powyżej linii bazowej elementu nadrzędnego.

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

Powód, dla którego <sup>znacznik wpływa na odstępy między dwoma wierszami, ma związek z wieloma czynnikami. Czynnikami są: wysokość wiersza, rozmiar indeksu górnego w stosunku do zwykłej czcionki, wysokość wiersza indeksu górnego i wreszcie, co jest dolnym indeksem górnym wyrównane z ... Jeśli ustawisz ... wysokość wiersza zwykłego tekstu, aby znalazł się w „pasmach tunelu” (tak to nazywam) o 135%, a zwykły tekst (100%) zostanie wypełniony białą o 35% więcej bieli. W przypadku akapitu wygląda to tak:

 p
    {
            line-height: 135%;
    }

Jeśli następnie nie zaznaczysz indeksu górnego na biało ... (tj. Utrzymasz wysokość linii na 0), indeks górny ma tylko szerokość własnego tekstu ... jeśli następnie poprosisz indeks górny, aby był procentem zwykłej czcionki przykład 70%) i wyrównujesz go ze środkiem zwykłego tekstu (tekst pośrodku), możesz wyeliminować problem i uzyskać indeks górny, który wygląda jak indeks górny. Oto ona:

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

Aby wszystkie wiersze były wyższe i wyglądały tak samo, jak wiersz z indeksem górnym, zdefiniuj większy line-heightdla całego akapitu

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

lub jakakolwiek wartość daje pożądany efekt.

Może to wyglądać dziwnie, ale tak właśnie opisałeś swoje wymagania.

EDYCJA: Aby wszystkie wiersze wyglądały tak samo, gdy tylko jeden potrzebuje więcej odstępu w pionie niż inne , WSZYSTKIE wiersze w akapicie będą musiały być wyższe.

Jak powiedziałem, może to nie być atrakcyjne rozwiązanie. Może coś można zrobić o rozpiętości co tylko tekst z Sub / SuperScript mniejszy , poza tym nie wierzę, co chcesz może zostać osiągnięty. Ale chciałbym zobaczyć rozwiązanie kogoś innego.

EDIT2: Nawiasem mówiąc, próbowałem małego pliku html zawierającego

<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>

Wszystkie linie mają tę samą wysokość w FF3.0.14 i Konquerorze (nie mogę mówić o innych przeglądarkach)

Używałem line-height: normal dla indeksu górnego, który działa dobrze dla mnie w Safari, Chrome i Firefox, ale nie jestem pewien co do IE.

Wykorzystaj to szczególnie w biuletynie -

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

Podoba mi się rozwiązanie Milingu Kilu, ale w tym samym duchu, który wolę

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

& sup1, & sup2 itd. mogą załatwić sprawę. to sztuczka HTML do indeksu górnego

Odpowiedź z tego miejsca działa zarówno w phantomjs, jak i w HTML-u osadzonym w wiadomości e-mail:

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