Außenabstände
Im IE 6 und 7 ist hasLayout notwendig, damit ein Element das in ihm stehende gefloatete Element vollständig umschließt. Nicht immer passt es, eine Breitenangabe zu definieren wie im Beispiel. Alternativ dazu können Sie hasLayout hier auch auslösen, indem Sie hasLayout durch height: 1% für den I...
Im IE 6 und 7 ist hasLayout notwendig, damit ein Element das in ihm stehende gefloatete Element vollständig umschließt. Nicht immer passt es, eine Breitenangabe zu definieren wie im Beispiel. Alternativ dazu können Sie hasLayout hier auch auslösen, indem Sie hasLayout durch height: 1% für den Internet Explorer 6 und min-height: 0 für den Internet Explorer 7 auslösen. Diese Angaben sollten Sie aber vor anderen standardkonformen Browsern verbergen.Eine Möglichkeit besteht in der Verwendung von obskuren Selektorkombinationen, die nur bestimmte Browser lesen:
* html .umfassend {
height: 1%;
} /* Nur fuer den IE6 */
*:first-child+html .umfassend {
min-height: 0;
} /* Nur fuer den IE7 */Alternativ zu solch kryptischen Angaben bieten sich konditionale Kommentare an, um eine externe Datei einzubinden, die nur von Internet Explorern bestimmter Versionen gelesen wird.
Außenabstände
Ebenfalls eine wichtige Rolle spielt hasLayout bei den Collapsing Margins, den zusammenfallenden Außenabständen. Das Prinzip ist dabei Folgendes: Vertikale Außenabstände fallen bei statischen, das heißt nicht gefloateten oder positionierten Elementen, zusammen, und das auch bei verschachtelten Elementen.Im folgenden Beispiel hat der umfassende Container einen oberen Abstand von 50px und der Absatz, der in ihm steht, hat ebenfalls einen oberen Abstand, dieses Mal von 30px. Damit die Ausmaße der beiden Elemente deutlich werden, sind sie mit Hintergrundfarben versehen:
<div style="margin: 50px; backgroundcolor:
yellow"><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p></div>Jetzt fällt der obere Abstand des div-Containers mit dem oberen Abstand des ersten Absatzes zusammen. Oberhalb des gelben div-Containers sind 50px Abstand, innerhalb des gelben div-Containers schließt der orangefarbene Absatz direkt - ohne Abstand - oben an.Nicht immer ist das Zusammenfallen der Außenabstände erwünscht. Verhindern lässt es sich, indem Sie padding oder border angeben. Durch padding: 1px beim umfassenden Container bleiben die Außenabstände erhalten.
<div style="margin: 50px; backgroundcolor:
yellow; padding: 1px"><p style="margin: 30px; backgroundcolor:
orange"> Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange"> Ein weiterer Absatz</p></div>Zusammenfassen lässt sich, dass die Situation in standardkonformen Browsern klar geregelt ist: Bei statischen Elementen fallen die vertikalen Außenabstände zusammen, außer sie haben padding oder border.
hasLayout und Collapsing margins
Im IE6 und IE7 verhält sich dies jedoch anders, denn das Zusammenfallen wird immer dann verhindert, wenn das Element hasLayout hat. Im folgenden Beispiel löst die Breitenangabe (width: 700px) im umfassenden div-Bereich hasLayout aus:
<div style="margin: 50px; backgroundcolor:
yellow; width: 700px;"><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein weiterer Absatz</p></div>Jetzt fallen im IE 6 und 7 die Außenabstände nicht zusammen, in anderen Browsern schon. Um dieselbe Darstellung im IE und in anderen Browsern zu gewährleisten, gibt es zwei Möglichkeiten: Wenn die Darstellung im IE6/IE 7 die gewünschte ist, ergänzen Sie padding oder border im umfassenden Element.Sollen hingegen die Außenabstände zusammenfallen, müssen Sie zu einem Trick greifen. Entfernen Sie im Beispiel width beim Element mit dem Außenabstand, aber ergänzen Sie ein weiteres umfassendes Element, das nur für die Breitenangabe zuständig ist:
<div style="width: 800px;"><div style="margin: 50px; backgroundcolor:
yellow; "><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein weitere Absatz</p></div></div>
Auf hasLayout prüfen
Sind Sie unsicher, ob ein Element Layout hat oder nicht, dann lässt sich das rasch testen. Vergeben Sie dem Element eine ID. Dann genügt es, in der Adresszeile des IE6 oder 7 Folgendes zu schreiben:
javascript: alert(ELEMENTid.
currentStyle.hasLayout)
Hierbei ersetzen Sie ELEMENTid durch die vergebene ID. Dann erscheint eine Meldungsbox, die verrät, ob das angegebene Element Layout hat (true) oder nicht (false). Sie haben nun typische Beispiele für die Auswirkungen von hasLayout auf die Darstellung im Browser kennengelernt. Aber nicht nur bei Floats, Margins und Filter spielt hasLayout eine Rolle: Es wirkt sich auch auf die Stapelreihenfolge bei der Verwendung z-index aus und verhindert im IE 6 eine Reihe von Bugs.Prinzipiell gilt, dass Elemente mit Layout im Allgemeinen eine stabilere Darstellung haben. Einem Element nachträglich Layout zu verpassen, ist an sich auch nicht schwer, da es Hacks wie height: 1% für den IE6 oder min-height: 0 für den IE7 gibt.Mühsamer ist es, hasLayout zu entfernen, wenn die über hasLayout bewirkte Darstellung im IE nicht die gewünschte ist. Hier ist dann größerer Aufwand notwendig, indem man etwa ein weiteres umfassendes Element einfügt, wie es am Beispiel der Collapsing Margins demonstriert wurde.
