Tipps & Tricks
Hilfestellungen rund um die Themen Internet & Programmierung
CSS-Problem: IE 5 ignoriert Stylesheet-Angaben nach Tantek Hack
Wer z.B. mit DIVs arbeitet, die eine fixe Breite mit Padding und Border haben, wird das Problem vielleicht kennen: Während z.B. der Internet Explorer 6 das DIV richtig darstellt, ist es im IE 5.5 zu klein.
Das kommt daher, dass beide Browser das sogenannte Box Model verschieden interpretieren, wobei der IE 6 es richtig macht, nämlich die komplette Breite aus den Angaben für "width", "padding" und "border" zusammenaddiert. Der IE 5 nimmt hingegen die Angabe für "width" und subtrahiert davon die Angaben für "padding" und "border". (Wenn der IE 6 im sog. Quirks-Modus ist, wird er dieses Verhalten ebenfalls zeigen.)
Angenommen, Sie möchten ein DIV mit Textinhalt und einer Breite von 100px, 10px padding und 1px border darstellen, dann würde der IE 6 die Gesamtbreite mit 122px anzeigen: Der Textinhalt ist 100px breit, links und rechts kommen jeweils 10px padding sowie je 1px border hinzu.
Der IE 5 würde hingegen das DIV mit einer Gesamtbreite von 100px darstellen und davon 22px abziehen, sodass der Inhalt tatsächlich nur 78px breit wäre.
Der sog. Tantek Hack löst dieses Problem, indem er einen weiteren Fehler des IE 5.5 ausnutzt. Dazu müssen Sie zunächst errechnen, wie breit das DIV denn nun tatsächlich dargestellt werden soll: in unserem Beispiel sind das 122px. Diesen Wert notieren Sie in Ihrem CSS-Stylesheet, gefolgt von zwei speziellen Styleangaben und anschließend notieren Sie den width-Wert, den Sie für den Inhaltsbereich vorgesehen haben, also hier: 100px.
div.box
{
border:1px solid #ff0000;
padding:10px;
width:122px;
voice-family: "\"}\"";
voice-family:inherit;
width:100px;
}
Erklärung: Beide Browser lesen die CSS-Angaben bis zur Zeile "width:122px;". Der IE 5 kann mit den folgenden beiden Zeilen nichts anfangen und bricht diesen Block ab, sodass er ausschließlich die erste Breitenangabe geliefert bekommt. Der IE 6 liest jedoch weiter und erhält so die andere Breitenangabe, wodurch die erste Angabe für ihn überschrieben wird.
Der IE 5 stellt Ihr DIV also 122px breit und den Textinhalt mit 122-20-2 = 100px dar. Der IE 6 stellt Ihren Textinhalt ebenfalls mit 100px und das komplette DIV mit 100+20+2 = 122px dar.
Der Hack verursacht allerdings ein weiteres Problem, nämlich dass der IE 5 den CSS-Code für die darauf folgende CSS-Klasse ignoriert. Setzen Sie aus diesem Grund immer eine Dummy-Klasse unter die mit dem Hack versehene Klasse. Damit das Stylesheet validiert, muss diese Klasse mindestens eine Zeile enthalten:
.dummyklasse
{
line-height:0px;
}
Der Original-Text von Tantek Çelik kann hier nachgelesen werden: Box Model Hack