Freitag,
30. März 2007

Der Italics-Bug (IE5.x und IE6.0) ist einer der am wenigsten bekannten IE-Bugs und gleichzeitig einer der lästigsten Zeitgenossen, den man sich im Verlauf der Layouterstellung einfangen kann. Ist er erst einmal da, sorgt er für unplanmäßig um einige Pixel größere Containerbreiten und innerhalb von float-basierten Layouts aufgrund dessen nicht selten für Chaos. Der auf positioniseverything.net beschriebene Bugfix ist zwar wirksam, aber er muss dem jeweiligen Elternelement des Verursachers zugewiesen werden.

#parent_container {overflow:visible}

Die Indentifizierung des auslösenden Elementes ist innerhalb komplexer Layouts gelegentlich gar nicht so einfach, denn es reicht schon die Auszeichnung eines einzelnen Wortes mittels <em> oder <i>, um den Bug auszulösen. Das heisst, er wird in der Regel durch Inhalte ausgelöst, die während der Layouterstellung meist noch gar nicht da sind.  Es bedeutet weiterhin, dass der Bugfix in der Regel individuell angepasst werden muss. Und das kann eben recht mühsam sein.

Daher folgender Gedanke: Der Wert visible stellt für die überwiegende Mehrheit der HTML-Elemente den Standardwert dar und muss daher eigentlich nicht explizit vergeben werden. Auf der anderen Seite ist bei expliziter Vorgabe eines Standardwertes auch nicht mit störenden Nebenwirkungen zu rechnen. Beste Voraussetzungen also, um diesen Bugfix allgemeingültig zu formulieren.

* html body * { overflow:visible }
* html iframe, * html frame { overflow:auto }
* html frameset { overflow:hidden }

Mit der ersten Regel werden alle HTML-Elemente mit der Eigenschaft overflow:visible versorgt. Im Anschluss werden dann nur noch die Elemente iframe, frame und frameset (diese drei bilden die Ausnahme von der Regel) auf ihre Standardwerte zurückgesetzt. Und das war’s auch schon. Der Italics-Bug ist kein Thema mehr.

Diese drei Zeilen CSS solllten möglichst weit vorn im Stylesheet - auf alle Fälle vor Beginn der eigentlichen Layoutdefinitionen - eingefügt werden. Über * html werden automatisch nur die Versionen 5.x & 6.0 des Internet Explorers erfasst. Alle anderen Browser ignorieren diese CSS-Regel.

UPDATE 23.4.07: Der Selektor der ersten CSS-Regel * html * verursacht Schwierigkeiten im IE5.x, wodurch keine vertikalen Scrollbalken mehr angezeigt werden. Das Problem lässt sich beseitigen, in dem der Bugfix erst auf Elemente innerhalb von body angewendet wird. Der Selektor wurde daher zu * html body * erweitert.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.