Webdesign mit (X)HTML und CSS

Internet Explorer 5 (und neuere Versionen im Quirks-Modus) unter Windows interpretiert das Box-Modell falsch. padding und border werden fälschlich von einer angegebenen Breite width abgezogen.

1. <div style="width:100px; border:10px solid red; padding:10px;">Box</div>

Der IE 5 zeigt diese Box nur mit einer Gesambreite von 100px an; korrekt ist eine Gesamtbreite von 140px (100px width + 20px border + 20px padding)

Wenn es nicht möglich ist, auf die gleichzeitige Angabe von width und padding/border beim selben Element zu verzichten, lassen sich als Ausgleich für den Box-Modell-Bug Conditional Comments oder sog. Box-Modell-Hacks einsetzen, z.B.:

1. #box {
2. width:100px;
3. padding:10px;
4. border:1px solid red;
5. }
6. /* IE Win Quirks only */
7. * html #box {
8. width /* */:122px;
9. }

Die zweite Breitenangabe wird wegen des Leerzeichens(!) und leeren Kommentars nach width nur vom IE 5 (und neueren IEs im Quirksmodus) eingelesen.

Um Kollisionen mit anderen Browsern zu vermeiden, sollten solche Korrekturen in einem Conditional Comment untergebracht werden. Die hier gezeigte Kombination sorgt z.B. in einem Stylesheet, das alle IEs bis einschließlich Version 7 einlesen, dafür, dass die IEs die Boxmodellkorrektur nur dann erhalten, wenn sie sich wie IE 5 verhalten.