Teil 7 – CSS, Probleme und Fehler

Der IE und das Box-Modell

Man kann davon halten was man will, Fakt ist, dass der Internet Explorer für Windows zur jetzigen Zeit der Haupt-Browser für das Web ist. Das bedeutet auch, dass man sich irgendwann mit der falschen Interpretation des Box-Modells durch den Internet Explorer beschäftigen muss.

Einfach ausgedrückt bedeutet dies, dass einige Versionen des IEs das Box-Modell anders darstellen, als standardkonforme Browser. So sieht zum Beispiel die per CSS gestylete Liste im IE anders aus, als in anderen Browsern.

Das folgende Diagramm zeigt, dass der korrekte Weg, die Gesamtbreite einer Box mit einer Breite des Inhalts von 200px mit 20px padding, 20px breitem Rahmen und 20px Randabstand (margin) zu ermitteln, folgender ist:
Inhalt (200px) + padding (20px+20px) + Rahmen (20px+20px) = 280px.

Einige Versionen des IEs berechnen die Breite der Box allerdings folgendermaßen:
Breite des Inhalts, padding und Rahmen = 200px.

Diagramm wie der Internet Explorer das CSS-Box-Modell falsch interpretiert

Um dieses Problem zu umgehen, muss man verschachtelte DIVs benutzen oder einen der zahlreichen Box-Modell-Hacks bemühen.