css-café

Pfad: Home / CSS-Artikel / HasLayout

Hier geht es um ein proprietäres Konzept für den IE, das erst spät wahrgenommen und zudem von Microsoft nur unvollständig dokumentiert wurde.

Die Entwickler von Microsoft haben entschieden, dass Elemente in der Lage sein sollen, bestimmte Eigenschaften anzunehmen, allerdings eher im Sinne objektorientierter Programmierung. Diese Eigenschaft nennen sie Layout bzw. hasLayout.

Das ist also keine CSS-Eigenschaft, die man einem Element bewusst zuweisen kann, sondern ein in die Rendering-Engine des Browsers eingebautes Rendering-Konzept, das einem Element bei bestimmten Voraussetzungen eine bestimmte Qualität verleiht. Diese Qualität wird durch die Zuweisung bestimmter CSS-Eigenschaften stillschweigend ausgelöst (Layout=true), während einige HTML-Elemente grundsätzlich mit Layout ausgestattet sind.

Kleine Anmerkung am Rande: In Visual Basic wird true mit -1 (minus 1) ausgewiesen. Wenn Sie also Entwickler-Tools wie zum Beispiel IE Developer Toolbar nutzen, um herauszufinden, welche Elemente denn Layout haben, wundern Sie sich bitte nicht über diese Angabe. Der Wert -1 bedeutet true, das Element hat Layout.
Es ist völlig unnötig, dass Sie dieses Konzept in allen Einzelheiten kennen oder verstehen sollten, Sie müssen nur wissen, dass es entscheidend zu vielen unorthodoxen Darstellungsvarianten des IE beiträgt. Aufgrund der mangelhaften Herstellerdokumentation lässt sich nur schwer nachvollziehen, welche Elemente von Haus aus mit Layout ausgestattet sind oder welche CSS-Eigenschaften Layout auslösen.

Per Default sind folgende Elemente mit Layout ausgestattet:

• body
• html im Standard-Modus
• table
• tr, td
• img
• hr
• input, textarea, select, button
• embed, object, iframe, applet
• marquee (MS-proprietär)

Die folgenden Eigenschaften versetzen ein Element automatisch in den hasLayout-Zustand:

• width oder height – eine explizite Angabe (nicht: auto); im Quirks Mode für alle Elemente, im Standard Mode nur für Blockelemente
• min-width, max-width, min-height, max-height (ab IE 7)
• position: absolute – jeder Wert
• float – left oder right
• display: inline-block
• zoom – jeder Wert (MS-proprietär)
• writing-mode: tb-rl – (MS-proprietär)

In der Regel stolpert man über die Frage, ob ein Element mit Layout ausgestattet ist oder nicht in dem Moment, in dem eine Anweisung vom IE entweder gänzlich ignoriert wird oder zu deutlichen Abweichungen führt. Dies äußert sich unter anderen regelmäßig in:

• diversen gängigen IE-Float-Bugs
• Boxen mit unterschiedlich interpretierten Eigenschaften
• unterschiedlichen Abständen zwischen Containern (collapsing margins)
• diversen Problemen beim Aufbau von Listen
• Unterschieden in der Positionierung von Hintergrundbildern

In solchen Fällen muss nun weiter gerätselt werden, welches Element noch nicht mit Layout ausgestattet ist bzw. welche CSS-Eigenschaft nun angewiesen werden muss, um Layout auszulösen. Ein guter Kandidat ist die Eigenschaft position: relative – ein wahres Allheilmittel. Wenn Sie also einmal in eine Situation geraten, in der Sie tief in einem komplexen Layout, zum Beispiel ein Bild in einem Container, im IE nicht angezeigt bekommen, verpassen Sie dem Container die Eigenschaft position: relative – et voilà: Das Bild erscheint wie von Zauberhand, der Container „hasLayout”.

Ein weiteres Heilmittel ist die Eigenschaft zoom, die aber erst in IEs ab 5.5 greift. Statt des eben beschriebenen position: relative setzen Sie den Wert zoom: 1 mit derselben Wirkung. Zoom ist eine proprietäre Eigenschaft von Microsoft, also nicht standardkonform. Aber sie versetzt das Element in den gewünschten Zustand Layout – und der Faktor 1 bewirkt zoom-mäßig auch nichts weiter, als alles genau so zu belassen, wie es gerade ist. Somit ist diese Anweisung auch absolut zukunftssicher.

Zugegeben – das klingt jetzt vielleicht alles leicht schwammig, aber derzeit lassen sich leider keine wirklich präzisen oder vollständigen Angaben zu diesem Phänomen machen. Dieses Konzept hat ungewöhnliche und schwer vorhersehbare Auswirkungen auf die Darstellungseigenschaften von Boxen und genau solche Auswirkungen auf Kindelemente innerhalb dieser Boxen.

Hinweis
Ab IE 8 soll mit dieser merkwürdigen Methode Schluss sein. Warten wir es ab...

Wer möchte, kann gerne die dürftigen Informationen direkt bei Microsoft studieren:
http://msdn.microsoft.com/...

Ansonsten gibt es auch diesen langen Artikel, der versucht, das Konzept von hasLayout ausführlichst aufzuklären:
http://www.satzansatz.de/cssd/onhavinglayout.html
oder die deutsche Übersetzung
http://onhavinglayout.fwpf-webdesign.de/

Blog-Kommentar eintragen

| | | |