hasLayout - der geheime Schlüssel zum Internet Explorer

Der Internet Explorer sieht es anders - das kommt uns bekannt vor. Generationen von Webdesignern ächzen unter dem Joch des Drahtverhaus aus Redmond. So mancher Bug macht uns das Leben schwer. Doubled Float Margin, falsche Interpretation des Box-Modelles, und solche Namen wie "Guillotine Bug" sprechen für sich selber. Das Horrorkabinett (mit Lösungen) ist auf Explorer Exposed! wunderbar zusammengefasst.

Jedoch gibt es eine zentrale Eigenschaft des Browsers, die der Grund für viele andere Fehler ist, und ich habe ca. drei Jahre gebraucht, bis es mir klar wurde: die Eigenschaft hasLayout.

Vereinfacht lässt sich sagen: wenn man einem Element keine Höche oder Breite zuweist, behält sich IE (vor allem IE6) vor, das Element falsch anzuzeigen. Da gibt es dann falsche Abstände, gefloatete Einzelemente rutschen aus der umgebenden Box raus, und noch viel seltsamere Effekte treten auf.

Das absolut abgefahrenste, was ich erlebt habe: beim Stylen der Threadanzeige eines Forums, bei dem ich gerundete Ecken verwendete (umgesetzt mit Sliding Doors).

So sollte es aussehen:

Stattdessen wurden die runden Kanten teils nicht dargestellt, die blauen Balken überlagerten mehrfach wiederholt den anderen Bereich, und das Beste: wenn man scrollte, veränderte sich diese Überlagerung, sah mal so, mal so aus.

Wenn man mit solchen Effekten des Internet Explorer 6 konfrontiert wird, für die es keine logische Erklärung gibt, empfielt sich eine ganz einfache Methode, die mir im beschriebenen Fall erst nach mehreren Tagen herumrätseln einfiel. Einfach dem betreffenden Element (oder einem der inneren bei verschachtelten Kästen) eine Breite oder Höche zuweisen. style="width: 100%" ist bei innenliegenden Block-Level-Elementen wie <div >und <p> unkritisch, da die Breite ja durch das umgebende Element definiert wird.

Und oh Wunder: in vielen Fällen ist das Problem damit gelöst. Alles sieht so aus, wie es sollte, und Webdesign macht wieder Spass.