nicht angemeldet
Auf dedlfix' Wunsch:
sub {
vertical-align: middle;
position: relative;
top: 0.33em;
font-size: 0.75em;
}
vertical-align sorgt dafür, dass alle Browser von denselben Faktoren ausgehen. Firefox hat z.B. als default vertical-align: super; bzw sub.
Das sorgt zwar dafür, dass der Text tiefgestellt ist, alledings wird dadurch auch die Zeilenhöhe beeinträchtigt, damit wirkt das Schriftbild etwas schwammig wenn die Zeilenabstände flattern.
position: relative; sowie top: 0.33em; positionieren den Text in allen Browsern an dieselbe Ausrichtung.
font-size: 0.75em; überschreibt die Default-Schriftgröße (beim Firefox z.B. "samller" bei Opera gibts keinen Defaultwert.
Das sorgt theoretisch dafür, das jeder Browser dieselbe Schriftgröße hat.
sub { font-size /*\**/: 1em\9; }
:first-child+html { font-size: 1em; }
* html sub { font-size: 1em; }
Der Internet Explorer sieht das aber nicht so - scheinbar ist das verhalten von sub irgendwie hardcodiert, egal welche Schriftgröße man verwendet, sie wird immer ein Stück kleiner dargestellt als definiert.
Der erste Hack ist für den IE8 (und greift angeblich manchmal auf für den IE7), der zweite nur für den IE7, der dritte nur für den IE6.
Der einfachheit halber jeweils mit 1em, das passt ganz gut. Bei größeren Schriftgrößen (um die 20px aufwärts) muss man allerdings etwas tunen. Der IE6 ist kann dann ruhig um die 0.8 bis 0.9em haben - der verkleinert scheinbar nicht ganz so krass.
sup {
vertical-align: middle;
position: relative;
top: -0.5em;
}
Das regeln wir ebenfalls mit position: relative anstatt vertical-align, ansonsten würden Konstrukte wie <p>Lorem <sup>9<sup>9<sup>9</sup></sup></sup>ipsum dolor</p> die Zeilenhöhe ungünstig beeinträchtigen.
In Summe sind die obenstehenden Regeln für eine schriftgröße von etwa 12 bis 16 Pixel gedacht. Bei einer Zeilenhöhe von 1.5em und einem Zeilenabstand von 1.5em (z.B. durch margin-bottom) erhält man somit auch bei mehrfachen Hochstellungen direkt unterhalb einer tiefstellung keine abweichende Zeilenhöhe und trotzdem überlappen die Zeichen nicht.