Wie kann ich mit hochgestellten Elementen eine konsistente Zeilenhöhe beibehalten?

Wenn ich eine habe <sup> -Element in einem mehrzeiligen Absatz hat die Zeile mit dem hochgestellten Zeichen einen größeren Zeilenabstand darüber als die anderen Zeilen, unabhängig davon, welche Zeilenhöhe ich dem Absatz hinzufüge.

Das bedeutet nicht, dass ich viele Absätze habe, die alle in einer einzigen Zeile stehen. Ich habe einen einzelnen Absatz mit genügend Inhalt, um einen Zeilenumbruch zu bewirken. Irgendwo (irgendwo) im Text kann ein sein <sup> oder <sub>. Dies wirkt sich auf die Zeilenhöhe für diese Zeile aus, indem oben/unten ein zusätzlicher Abstand hinzugefügt wird. Wenn ich eine größere Zeilenhöhe auf dem Absatz einstelle, ändert dies nichts an dem Problem. Die Zeilenhöhe wird erhöht, aber der zusätzliche Abstand bleibt bestehen.

Wie kann ich es konsistent machen – dh alle Zeilen haben den gleichen Abstand, ob sie a enthalten <sup> oder nicht?

Ihre Lösungen müssen browserübergreifend sein (IE 6+, Firefox, Safari, Opera, Chrome)

Zeilenhöhe behebt das Problem, aber Sie müssen es möglicherweise ziemlich groß machen: Bei meinen Einstellungen muss ich die Zeilenhöhe vor dem auf etwa 1,8 erhöhen <sup> stört es nicht mehr, aber das ist von Schriftart zu Schriftart unterschiedlich.

Ein möglicher Ansatz, um konsistente Zeilenhöhen zu erhalten, besteht darin, anstelle des Standardstils Ihren eigenen hochgestellten Stil festzulegen vertical-align: super. Wenn du benutzt top Es fügt dem Zeilenfeld nichts hinzu, aber Sie müssen die Schriftgröße möglicherweise weiter reduzieren, damit es passt:

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

Ein weiterer Hack, den Sie versuchen könnten, besteht darin, die Positionierung zu verwenden, um sie ein wenig nach oben zu verschieben, ohne die Linienbox zu beeinflussen:

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

Das birgt natürlich die Gefahr, in die Linie darüber zu krachen, wenn Sie nicht genug Linienhöhe haben.

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

Der Trick besteht darin, die <sup>‘s line-height auf 0. @Scott sagte, er solle normal verwenden, aber das funktioniert nicht immer.

Das bedeutet du muss sich nicht ändern die Zeilenhöhe des umgebenden Textes, um den hochgestellten Text aufzunehmen. Ich habe dies in IE7+ und den anderen gängigen Browsern getestet.

Ich hatte das gleiche Problem und keine der gegebenen Antworten funktionierte. Aber ich fand eine Git Commit mit einem Fix, der bei mir funktioniert hat:

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

bleib locker:

sup { vertical-align: text-top; }

[font-size dependent on your individual type-face]

Ich bevorzuge die vorgeschlagene Lösung Hierwie beispielhaft dargestellt durch diese 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>.

Das Schöne an dieser Lösung ist, dass Sie die vertikale Positionierung der hoch- und tiefgestellten Zeichen anpassen können, um Konflikte mit der Linie darüber oder darunter zu vermeiden … im obigen Beispiel erhöhen oder verringern Sie einfach die 0.2em um Ihren Anforderungen gerecht zu werden.

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

Der Grund, warum die <sup> Tag den Abstand zwischen zwei Zeilen beeinflusst, hat mit einer Reihe von Faktoren zu tun. Die Faktoren sind: Zeilenhöhe, Größe des hochgestellten Zeichens im Verhältnis zur normalen Schriftart, die Zeilenhöhe des hochgestellten Zeichens und nicht zuletzt, wie hoch das untere Ende des hochgestellten Zeichens ausgerichtet ist mit … Wenn Sie … die Zeilenhöhe festlegen von normalem Text in einem “Tunnelband” (so nenne ich es) von 135 %, dann wird normaler Text (die 100 %) mit 35 % mehr Weiß weiß aufgefüllt. Für einen Absatz sieht das so aus:

 p
    {
            line-height: 135%;
    }

Wenn Sie dann den hochgestellten Index nicht weiß auffüllen … (dh seine Zeilenhöhe auf 0 halten), hat der hochgestellte Index nur die Breite seines eigenen Textes … wenn Sie dann den hochgestellten Index auffordern, einen Prozentsatz der regulären Schriftart zu sein (z Beispiel 70 %) und Sie richten es mit der Mitte des regulären Textes aus (Textmitte), können Sie das Problem beseitigen und ein hochgestelltes Zeichen erhalten, das wie ein hochgestelltes Zeichen aussieht. Hier ist es:

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