Wenn ich ein <sup>
Tag in einem mehrzeiligen <p>
Tag habe, hat die hochgestellte Zeile einen größeren Zeilenabstand darüber als die anderen Zeilen, unabhängig davon, welche Zeilenhöhe ich auf die gesetzt habe <p>
.
Zur Verdeutlichung bearbeiten : Ich meine nicht, dass ich viele <p>
s habe, die sich jeweils in einer einzelnen Zeile befinden. Ich habe eine Single <p>
mit genügend Inhalten, um mehrere Zeilen zu umbrechen. Irgendwo (irgendwo) im Text kann es ein <sup>
oder geben <sub>
. Dies wirkt sich auf die Linienhöhe für diese Linie aus, indem ein zusätzlicher Abstand über / unter hinzugefügt wird. Wenn ich eine größere Zeilenhöhe einstelle, <p>
macht dies keinen Unterschied für das Problem. Die Zeilenhöhe wird erhöht, der zusätzliche Abstand bleibt jedoch bestehen.
Wie kann ich es konsistent machen - dh alle Zeilen haben den gleichen Abstand, unabhängig davon, ob sie ein enthalten <sup>
oder nicht?
Ihre Lösungen müssen browserübergreifend sein (IE 6+, FF, Safari, Oper, Chrome).
quelle
vertical-align: bottom
(obwohl das nicht so viel bringt wietop
) und dannposition:relative;
mit einem positiventop
.Der Trick besteht darin, die
<sup>
Zeilenhöhe des S auf 0 zu setzen. @Scott soll normal verwenden, aber das funktioniert nicht immer.Dies bedeutet, dass Sie die Zeilenhöhe des umgebenden Textes nicht ändern müssen , um den hochgestellten Text aufzunehmen. Ich habe dies in IE7 + und den anderen gängigen Browsern getestet.
quelle
line-height
Attributen. Es kannline-height
natürlich immer noch Schnittpunkte mit der vorherigen Linie verursachen, wenn der Gesamtwert auf klein eingestellt ist.line-height: 100%
in diesem Fall.line-height
I 0, 1, 1em & 100% gefunden. All dies funktioniert sicherlich in Chrome & Firefox.Ich hatte das gleiche Problem und keine der gegebenen Antworten funktionierte. Aber ich habe ein Git-Commit mit einem Fix gefunden, der für mich funktioniert hat:
quelle
halte es einfach:
[ Schriftgröße abhängig von Ihrer individuellen Schrift]
quelle
quelle
Ich bevorzuge
length
die vertikale Ausrichtung. Dadurch wird die Grundlinie des Elements auf die angegebene Länge über der Grundlinie seines übergeordneten Elements ausgerichtet.quelle
Der Grund, warum das
<sup>
Tag den Abstand zwischen zwei Zeilen beeinflusst, hängt mit einer Reihe von Faktoren zusammen. Die Faktoren sind: Zeilenhöhe, Größe des hochgestellten Zeichens im Verhältnis zur regulären Schriftart, Zeilenhöhe des hochgestellten Zeichens und nicht zuletzt, wie der untere Rand des hochgestellten Zeichens mit ... Wenn Sie ... die Zeilenhöhe einstellen von regulärem Text in einem "Tunnelband" (so nenne ich es) von 135%, dann wird regulärer Text (100%) weiß gepolstert mit 35% mehr Weiß. Für einen Absatz sieht das so aus:Wenn Sie dann den hochgestellten Text nicht weiß auffüllen ... (dh die Zeilenhöhe auf 0 halten), hat der hochgestellte Text nur die Breite seines eigenen Textes ... wenn Sie dann den hochgestellten Index bitten, ein Prozentsatz der regulären Schriftart zu sein (z Beispiel 70%) und wenn Sie es an der Mitte des regulären Textes (Text-Mitte) ausrichten, können Sie das Problem beseitigen und einen hochgestellten Index erhalten, der wie ein hochgestellter Text aussieht. Hier ist es:
quelle
Ich bevorzuge die hier vorgeschlagene Lösung , wie diese jsfiddle veranschaulicht :
CSS:
HTML:
Das Schöne an dieser Lösung ist, dass Sie die vertikale Positionierung von hochgestelltem und tiefgestelltem Index
0.2em
anpassen können, um Konflikte mit der darüber oder darunter liegenden Linie zu vermeiden .quelle
Um alle Zeilen größer zu machen und mit der hochgestellten Zeile gleich auszusehen, definieren Sie eine größere Zeile
line-height
für den gesamten Absatzoder welcher Wert auch immer den gewünschten Effekt ergibt.
Es mag seltsam aussehen, aber so haben Sie Ihre Anforderungen beschrieben.
BEARBEITEN: Damit alle Zeilen gleich aussehen, wenn nur eine mehr vertikalen Raum benötigt als die anderen , müssen ALLE Zeilen im Absatz höher sein.
Dies ist, wie gesagt, möglicherweise keine attraktive Lösung. Vielleicht kann etwas mit einer Spanne gemacht werden, die nur den Text mit dem hochgestellten / hochgestellten Text verkleinert . Abgesehen davon glaube ich nicht, dass das, was Sie wollen, erreicht werden kann. Aber ich würde gerne die Lösung eines anderen sehen.
EDIT2: Übrigens habe ich eine kleine HTML-Datei ausprobiert, die enthält
Und die Linien sind in FF3.0.14 und Konqueror alle gleich hoch (ich kann nicht für andere Browser sprechen)
quelle
Ich habe die Zeilenhöhe verwendet: Normal für das hochgestellte Zeichen, was für mich in Safari, Chrome und Firefox gut funktioniert, aber ich bin mir über den Internet Explorer nicht sicher.
quelle
Verwenden Sie dies speziell für Newsletter -
quelle
Ich mag die Lösung von Milingu Kilu, aber in dem Geist, den ich bevorzuge
quelle
& sup1, & sup2 usw. könnten den Trick machen. Es ist ein hochgestellter HTML-Trick
quelle
Antwort von hier , funktioniert sowohl in Phantomjs als auch in E-Mail-eingebettetem HTML:
quelle