Darstellungsprobleme mit "hasLayout" bei IE 6 und IE 7 lösen

Auch wenn es neuere und bessere Browser gibt: Ein nicht unerheblicher Teil von Nutzern surft noch mit dem Internet Explorer 7 oder 6. Natürlich muss das Layout in diesen veralten Browsern nicht genauso aussehen wie in moderneren Browsern, aber es soll doch grundlegend funktionieren.Und damit das klappt, müssen Sie hasLayout verstehen. Der Artikel zeigt die prinzipielle Funktionsweise von hasLayout und demonstriert anhand von kleinen praktischen Beispielen, wie Sie über das gezielte Setzen von hasLayout eine mit anderen Browsern kompatible Darstellung im IE 6 und 7 erreichen.

Ganz indirekt

hasLayout ist eine Microsoft-Erfindung und unterscheidet sich grundlegend von CSS-Eigenschaften, die man sonst kennt. Andere CSS-Eigenschaften wie width oder font-size werden direkt einem Element zugewiesen. Im Gegensatz dazu können Sie hasLayout nicht direkt zuweisen, es gibt also keine Eigenschaft hasLayout, die Sie in Ihrem CSS-Stylesheet einsetzen.hasLayout erhalten Elemente indirekt, nämlich über andere CSS-Eigenschaften: Bestimmte CSS-Eigenschaften wie width mit einem anderen Wert als auto bewirken, dass Elemente Layout erhalten. Außerdem gibt es Elemente wie html oder body, die bereits inhärent Layout haben.

Entscheidend ist, dass in Abhängigkeit davon, ob ein Element hasLayout hat oder nicht, die Darstellung ganz unterschiedlich ausfällt. hasLayout ist beispielsweise dafür zuständig, ob Außenabstände zusammenfallen, gefloatete Bereiche umschlossen werden oder Filter für Transparenzen und anderes funktionieren. Allerdings: hasLayout ist nur im IE6 und IE7 relevant, der IE8 ist in puncto CSS wesentlich standardkonformer und kennt dieses proprietäre Konzept nicht mehr.Eigenschaften, die hasLayout bewirken, sind neben dem gerade erwähnten width auch height mit einem anderen Wert als auto oder die proprietäre Eigenschaft zoom. Im Internet Explorer 7 bewirken min-width und min-height ebenfalls hasLayout.zoom ist eine von Microsoft eingeführte Eigenschaft, die besonders bei Tests praktisch ist. Wie ihr Name schon sagt, können Sie mit ihr Elemente vergrößern oder verkleinern. Folglicht bewirkt zoom: 1 keine Änderung an der Größe eines Elements. Aber es sorgt dafür, dass ein Element hasLayout erhält. Da dies in anderen Browsern keine Auswirkung hat, bietet sich zoom für schnelle Tests an. In der endgültigen Version eines Stylesheets sollte man allerdings so wenig proprietären Code wie möglich einsetzen.Häufig eingesetzt wird für den Internet Explorer 6 height: 1%. Diese Angabe ist eigentlich in den meisten Situationen unsinnig, da die Elemente wesentlich höher werden sollen als 1% des Elternelements. Dass dies trotzdem zum gewünschten Effekt führt, liegt an einem Bug im IE 6: dem sogenannten Expanding Box- Bug.Der Internet Explorer 6 erweitert automatisch Elemente so, dass der Inhalt darin Platz findet. Das heißt, wenn Sie - nur für den IE6, versteht sich - eine Angabe wie height: 1% machen, brauchen Sie nicht befürchten, dass Ihre Elemente zu wenig hoch werden, sie werden weiterhin so hoch, wie es der Inhalt erfordert.Gleichzeitig aber erhält das Element Layout. Für den IE7 dürfen Sie height: 1% nicht in dieser Weise verwenden, denn dieser würde die Höhenangabe wörtlich interpretieren. Stattdessen hilft für den IE7 die Angabe minwidth: 0, die ebenfalls hasLayout auslöst.

Filter

Sehen wir uns ein erstes Beispiel an, bei dem hasLayout Wirkung zeigt - die Filter. Filter sind ebenfalls eine Microsoft-Erfindung. Da man möglichst nicht auf proprietären Code setzen sollte, wäre es besser, auf ihren Einsatz zu verzichten. Andererseits aber sind Filter für manche fortgeschrittene Designeffekte wie beispielsweise Transparenzen ungeheuer praktisch. Der springende Punkt dabei ist: Filter funktionieren nur, wenn ein Element hasLayout besitzt.Definieren wir einmal eine Klasse transparent, die ein Element halb transparent setzen soll, und das browserübergreifend. Dafür braucht man die Filter-Angaben in zwei unterschiedlichen Schreibweisen, um alle IE-Versionen zu berücksichtigen, und außerdem opacity für andere Browser.

Wenn Sie so vorgehen, wird die Transparenz allerdings im IE6 und IE7 nicht dargestellt. Der IE8 stellt sie hingegen korrekt dar, da bei ihm das hasLayout-Konzept nicht mehr relevant ist. Für den IE9 wiederum ist hasLayout nicht relevant und er interpretiert sogar die opacity-Eigenschaft direkt.Ergänzt man hingegen eine CSS-Angabe, die hasLayout auslöst, so funktioniert die Transparenz wie gewünscht. An dieser Stelle ist der Einsatz von zoom: 1 akzeptabel. Dieses samt Filterangaben sollten Sie dann in ein eigenes Stylesheet auslagern, das über konditionale Kommentare eingebunden wird, damit der proprietäre Code von den anderen Browsern nicht gelesen wird.

Umschließen von Floats

Auch beim Umschließen von Floats spielt hasLayout eine entscheidende Rolle. Grundsätzlich gilt ja: Gefloatete Elemente werden nicht automatisch von dem Container umschlossen, in dem sie sich befinden. Im folgenden Beispiel befindet sich ein gefloatetes Bild in einem Container. Damit die Ausmaße des Containers gut zu sehen sind, wird ihm eine Hintergrundfarbe zugewiesen.

Das Ergebnis ist eindeutig: Wenn die gefloatete Grafik höher ist als der sie umgebende Text, ragt sie aus dem div-Element heraus.Wenn jedoch der umfassende Container im Internet Explorer hasLayout hat, umschließt er den gefloateten Bereich. Im folgenden Beispiel wird hasLayout über eine Breitenangabe (width: 700px) ausgelöst:

In anderen Browsern bleibt hingegen die Darstellung wie gehabt: Die Grafik ragt aus dem sie umfassenden Container heraus. Um hier eine konsistente Darstellung zu erreichen, müssen Sie dafür sorgen, dass der umfassende Container auch in anderen Browsern den gefloateten Bereich umschließt. Das erreichen Sie beispielsweise, indem Sie dem umfassenden Container ein overflow: hidden zuweisen: