Der Internet Explorer und CSS

30.01.2004 Nachdem ich vor zwei Wochen die Design-Tabellen durch CSS Layer ersetzt habe, musste ich noch einige Male nacharbeiten. Anzeigefehler der Browser Netscape 6.1, Mozilla (1.5) und Opera (6.05 und 7.23) waren leicht zu beheben oder wegen Geringfügigkeit leicht zu tollerieren. Der Internet Explorer bereitete mir dagegen schon einiges mehr an Mühe.

Internet Explorer 5 und das Box Model

Anhand des CSS Box Models lässt sich errechnen, wieviel Platz ein Layer einnimmt: zu der Breite bzw. der Höhe des Layers (width bzw. height) werden dabei der Innenabstand (padding), der Rahmen (border) sowie der Außenabstand (margin) noch hinzugerechnet. Der Internet Explorer 5 dagegen interpretiert das Box Model nicht diesem Standard entsprechend, bei ihm sind Rahmen und Innenabstand bereits in der Layer-Breite enthalten. Kein Wunder also, dass er bei einem so grundsätzlichen Fehler meine Seiten ganz anders anzeigte als die anderen Browser. Beheben konnte ich dieses Problem, indem ich den Innenabstand aller Layer sowie den Außenabstand aller darin enthaltenen Blockelemente (p, h1 etc.) auf 0 gesetzt, und Abstände nur noch über deren Innenabstand geregelt habe:

div { padding:0; }
p { margin:0; padding:8px 20px 12px; }

Danach zeigten alle Browser die Layer in gleicher Ausdehnung an. Beim Internet Explorer 6 ist dieser grauenhafte Bug übrigens zwar behoben, bei Fehlen einer Doctype Angabe springt er allerdings in den fehlerhaften Anzeige-Modus seines Vorgängers zurück.

Internet Explorer 6: Der Peek-a-boo Bug

Lange habe ich gebraucht, um heraus zu finden, warum der Internet Explorer 6 bei einer Seite nach dem Herunter-Scrollen die letzten Zeilen nicht anzeigte. Nach dem Aktualisieren tauchten diese dann wieder auf, nach mehrmaligen Hin- und Herscrollen verschwanden noch ein paar Zeilen mehr. Peek-a-boo ist der Name dieses Bugs, und beheben lässt er sich, indem man dem Element, das ihn auslöst, eine Höhenangabe zuweist:

div.beispiel1 { height:100%; }

Ein recht einfacher Workaround, schwierig war es allerdings, zuvor das betreffende Element, den Trigger, ausfindig zu machen.

Internet Explorer 6: Kein Markieren möglich

Ein Bug des Internet Explorer 6 machte sich erst bemerkbar, als ich eine Textpassage kopieren wollte: So wurde in einem Fall beim Ziehen der Maus von links oben nach rechts unten der Text links oberhalb der Einfügemarke markiert, in anderen Fällen nur bis zu einer bestimmten Zeile, oder gleich bis ganz zum Ende des Textes. Nach langen Herumprobieren fand ich heraus, dass der Internet Explorer Probleme hatte mit mehr als einem Layer, der absolut positioniert war. Bei den Seiten, auf denen das Ersetzen von position:absolute durch position:relative ohne größere Umstellungen möglich war, habe ich dieses Problem inzwischen behoben (auf dieser Seite sollte es z.B. nicht mehr auftreten), bei den anderen werde ich mich später irgendwann noch mal dransetzen.

Meine ersten Erfahrungen mit dem CSS-Layer-Layout haben mir gezeigt, dass der Internet Explorer im Gegensatz zu anderen modernen Browsern bei der Umsetzung deutliche Defizite aufweist. Dazu zählen für mich übrigens nicht nur die Bugs, sondern auch die gänzlich fehlende Unterstützung wichtiger CSS-Eigenschaften wie position:fixed oder max-width. Der Internet Explorer war einst Vorreiter in der Umsetzung von CSS. Sieht man einmal von der Browser-Krücke Nescape 4 ab (siehe Webnotiz Netscape 4 und CSS), so ist er in Bezug auf CSS inzwischen das Schlusslicht.