HTML & lt; sup / & gt; Tag beeinflussen Zeilenhöhe, wie man es konsistent machen?

Wenn ich eine  tag in einem multi-line  tag, die Zeile mit dem Hochgestellt auf einen größeren Zeilenabstand oben als die anderen Linien, unabhängig davon, was line-height habe ich auf die .

Edit zur Klarstellung: ich meine nicht, ich habe sehr viel s, jedes ist in einer einzigen Zeile. Ich habe ein Einzelzimmer  mit genug Inhalt zu verursachen Umhüllung auf mehrere Zeilen. Irgendwo (irgendwo) im text es kann ein  oder . Dies wirkt sich auf die Zeilenhöhe für diese Zeile durch hinzufügen eines zusätzlichen Abstand oben/unten. Wenn ich einen größeren line-height auf die  dies macht keinen Unterschied für das problem. Die line-height erhöht, aber der zusätzliche Abstand bleibt.

Wie kann ich es machen das konsequent, d.h. alle Zeilen haben denselben Abstand, ob Sie enthalten eine  oder nicht?

Ihre Lösungen für cross-browser (IE 6+, FF, safari, opera, chrome)

InformationsquelleAutor der Frage Andrew Bullock | 2009-10-07

152

line-height funktioniert es zu beheben, aber haben Sie vielleicht, um es zu machen ziemlich groß: auf meine Einstellungen die ich erhöhen müssen, line-height auf etwa 1,8 vor der  nicht mehr stört es, aber dies variiert von schriftart zu schriftart.

Einen möglichen Ansatz, um konsequente Linie heights ist, um Ihren eigenen Hochgestellt styling statt der Standard -vertical-align: super. Wenn Sie top es wird nichts hinzufügen, um die line-box, aber Sie haben können, zu reduzieren font-size weiter fit zu machen:
```
sup { vertical-align: top; font-size: 0.6em; }
```
Anderen hack, die Sie könnten versuchen ist, um die Positionierung verwenden, um zu bewegen es ein wenig, ohne die Zeile Feld:
```
sup { vertical-align: top; position: relative; top: -0.5em; }
```
Natürlich läuft auch das Risiko von Abstürzen in der Zeile oben, wenn Sie nicht genug line-height.

InformationsquelleAutor der Antwort bobince
72
```
sup {
 font-size: 0.83em;
 vertical-align: super;
 line-height: 0;
 }
```
Der trick ist, um die 's line-height auf 0. @Scott sagte normal, aber das funktioniert nicht immer.

Bedeutet dies, dass Sie nicht ändern die line-height des umgebenden text, um Platz für den hochgestellten text. Ich habe diese getestet in IE7+ und anderen gängigen Browsern.

InformationsquelleAutor der Antwort Richard Le Poidevin
5

Ich hatte das gleiche problem und nicht der gegebenen Antworten gearbeitet. Aber ich fand ein git commit mit einem fix, der hat Arbeit für mich:
```
sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
```
InformationsquelleAutor der Antwort PiTheNumber
1

halten Sie es einfach:
```
sup { vertical-align: text-top; }
```
[font-size abhängig von Ihrer individuellen Typ-Gesicht]

InformationsquelleAutor der Antwort Milingu Kilu
1

Bevorzuge ich length auf der vertikalen auszurichten. Dieser richtet die Grundlinie des Elements an der angegebenen Länge über der Grundlinie des übergeordneten Elements ein.
```
sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}
```
InformationsquelleAutor der Antwort Dallas
1

Der Grund, warum die  - tag betroffen ist, den Abstand zwischen zwei Linien zu tun hat mit einer Reihe von Faktoren. Die Faktoren sind: - Zeile-Höhe, Größe der hochgestellten Zeichen in Bezug auf die reguläre schriftart, Zeilenhöhe des hoch-und nicht zuletzt, was ist der Boden des Hochgestellt Ausrichtung mit...
Wenn Sie... die Zeilenhöhe der normale text in einem "tunnel band" (so nenne ich es) von 135%, dann normale text (der 100%) bekommt, weiß gepolstert mit 35% mehr weiß. Für einen Absatz dieses sieht wie folgt aus:
```
 p
 {
 line-height: 135%;
 }
```
Wenn man dann nicht weiß pad das hochstellen...(d.h. halten Sie dessen line-height auf 0) das Hochgestellt hat nur die Breite der seine eigenen Texte... wenn Sie dann Fragen, die Hochgestellt werden, ein Prozentsatz der in Normalschrift (z.B. 70%) und richten Sie es mit der Mitte der normale text (text-Mitte) können Sie beseitigen das problem und Holen Sie sich Hochgestellt an, die sieht aus wie eine hochgestellte. Hier ist es:
```
sup
{
 font-size: 70%;
 vertical-align: text-middle;
 line-height: 0;
}
```
InformationsquelleAutor der Antwort nth

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

InformationsquelleAutor der Antwort Anup Puri

0

Alle Linien größerum das gleiche wie in der Zeile mit dem Exponenten, definieren Sie eine größere line-height für den gesamten Absatz
```

```
oder was auch immer-Wert gibt die Wirkung, die Sie wünschen.

Es so Aussehen mag seltsam, aber das ist, wie Sie beschrieben Ihre Anforderungen.

EDIT: um alle Zeilen gleich Aussehen wenn nur eine braucht mehr vertikalen Platz als die anderenwerden ALLE Zeilen im Absatz haben, größer zu sein.

Diese, wie ich sagte, kann nicht eine attraktive Lösung. Vielleicht etwas getan werden kann, mit einer Spannweite macht nur den text mit der sub - /superscript kleinereabgesehen davon, dass ich glaube nicht, was Sie wollen, erreicht werden kann. Aber ich möchte sehen, wie jemand anderes die Lösung.

EDIT2: Übrigens, ich habe versucht eine kleine html-Datei mit
```
<html>
<head>
<title>line-height</title>
<style>
p {
 line-height : 1.5em;
 width : 25em;
}
</style>
</head>
<body>
Mary had a little lamb, its fleece1 was white as snow, 
and everywhere that Mary went, the lamb2 was sure to go.

</body>
</html>
```
Und die Linien sind alle die gleiche Höhe in FF3.0.14 und Konqueror (ich kann nicht sprechen für andere Browser)

InformationsquelleAutor der Antwort pavium
0

Habe ich mit line-height: normal, Hochgestellt, das funktioniert bei mir in Safari, Chrome und Firefox, aber ich bin mir nicht sicher über IE.

InformationsquelleAutor der Antwort Scott Chandler
0

Speziell für newsletter -
```
&reg;
```
InformationsquelleAutor der Antwort HADI
0

Ich mag Milingu Kilu ' s-Lösung, aber im gleichen Geist, den ich lieber
```
sup { vertical-align:top; line-height:100%; }
```
InformationsquelleAutor der Antwort Bigmat
0

&sup1, &sup2, etc. könnte den trick tun. es ist ein HTML-trick, um hochgestellte

InformationsquelleAutor der Antwort Rizzoli

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.