Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

Das etwas andere Box-Modell der alten IEs

Im Kapitel über das Box-Modell haben Sie gelesen (im Buch Seite 143), dass die Berechnung der Gesamtbreite einer Box wenig intuitiv ist:

  • In der realen Welt sind Innenabstand und Rahmenbreite in der Breitenangabe einer Kiste enthalten.
  • Bei CSS-Boxen werden Innenabstand (padding) und Rahmenbreite (border-width) zur Breitenangabe (width) hinzugefügt.

Der Internet Explorer 5.x orientierte sich bei der Berechnung der Gesamtbreite einer Box an den intuitiveren Kästchen aus der realen Welt und liegt damit falsch. Der Internet Explorer 6 berechnet die Boxen korrekt, solange er im Standardmodus ist.

Im Klartext: Wenn für irgendeine Box sowohl width als auch horizontale Werte für padding oder border definiert worden sind, stellen IE5.x und IE6 im Quirks-Modus die Box zu klein dar. Hier ein Beispiel:

p#beispiel {
  width:400px;
  padding:10px;
  border:solid 10px #333;
}

Mit diesem CSS passiert Folgendes:

  • Korrekt berechnet hat dieser Absatz eine Breite von 440px: 400px width plus jeweils 10px padding-left, padding-right, border-left und border-right.

Falsch berechnet ist der Absatz nur noch 400px breit: Die 400px width sind inklusive padding und border. Für den Inhalt bleiben nur noch 360px.

Sie können sich vorstellen, dass diese falsche Berechnung beim Layouten per CSS drastische Konsequenzen haben kann. Solange Sie für Ihre Webseiten einen korrekten doctype angeben, arbeitet der IE6 im Standardmodus.

Falls Sie auf den IE5.x Rücksicht nehmen möchten, definieren Sie die Breite der Box noch einmal mit 440px. Die Angaben für padding und border bleiben gemäß der Kaskade unverändert, und schon ist die Browserwelt wieder in Ordnung: 

p#beispiel { width: 440px; }

Auf irgendeine Art und Weise müssen Sie nur dem IE5.x diese Box-Berechnung zukommen lassen. Was tun, sprach Zeus, und entdeckte die Conditional Comments.

Der IE5 war seiner Zeit einfach voraus

Der IE5 hat für sein eigenwilliges Box-Modell viel Häme einstecken müssen, aber inzwischen hat sich rumgesprochen, dass man damit eigentlich viel besser arbeiten kann als mit dem traditionellen CSS-Box-Modell. 

Inzwischen ist das IE5-Box-Modell unter dem Namen »border-box« Teil des CSS-Standards geworden. Mehr dazu erfahren Sie z. B. in meinem Artikel bei Dr. Web: 

In meinem Buch »Flexible Boxes« wird ausführlich auf die Arbeit mit dem border-box-Modell eingegangen.