Direktnavigation

Bookmark and Share

Weitere Infos

Sie lesen gerade:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Das neue "Little Boxes" heißt "Einstieg in CSS" (2013)

Einstieg in CSS (Cover)

Infos bei:

Inhaltsbereich

19.2.2 Der Internet Explorer und das »Layout«

Wenn der Internet Explorer den Quelltext in eine sichtbare Webseite verwandelt, benutzt er ein Konzept, dass seine Entwickler »Layout« getauft haben.

Idealerweise würde ein Browser für alle Elemente auf der Webseite die Größe und Position gemäß der Angaben im Stylesheet berechnen. Da das sehr lange dauern kann, haben die Entwickler des Internet Explorer die Darstellung der Seite etwas beschleunigt:

  • Die wichtigsten Elemente einer Seite bekommen das Merkmal hasLayout.
  • Nur Elemente mit hasLayout werden wirklich komplett abgearbeitet.
  • Für alle anderen Elemente werden Größe und Position durch das nächste Vorfahren-Element mit hasLayout bestimmt. 

Viele Bugs des Internet Explorer, insbesondere solche in float-Umgebungen, gehen auf dieses Konzept zurück und lassen sich beheben, indem man einem Element explizit hasLayout gibt. Das geschieht durch die Deklaration unter anderem folgender CSS-Eigenschaften:

  • position: absolute und float
  • width und height mit Angabe irgendeines Werts (außer auto)

Auf dieser Erkenntnis beruht der Holly-Hack, den Sie bei der Erstellung der Galerie (im Buch ab Seite 288) bereits eingesetzt haben:

  • Das Element div.galerie wurde vom Internet Explorer nicht ganz korrekt dargestellt.
  • Durch die Anweisung height: 1% bekam div.galerie das Merkmal hasLayout, und schon verstand auch der Internet Explorer alles richtig.

Der Internet Explorer gibt dem Element hasLayout, weil es die Eigenschaft height hat, ignoriert aufgrund eines anderen Bugs aber die Angabe von 1% und stellt die Box in ihrer normalen Höhe dar. Einfach, aber effektiv.

On Having Layout

Wenn Sie ganz genau wissen wollen, was es mit hasLayout auf sich hat – in dem folgenden Artikel wird das Thema wirklich vertieft: