Laut dem W3C ist eine Box in CSS eindeutig (deutsche Übersetzung hier) definiert. Doch wen wundert es, leider haben nicht alle Browser das W3C Modell korrekt übernommen und somit ist das Ziel der pixelgenauen Darstellung einer eigentlich eindeutigen Box nicht so leicht. In diesem Fall ist es der IE 5.x/Win, der stark von den Vorgaben abweicht.

Zur Verdeutlichung des Problems des IE 5.x/Win folgendes Beispiel:

Wenn wir z.B. einer 200 Pixel breiten Box einen 10 Pixel breiten Rahmen hinzufügen, so muss die Box gemäß der W3C-Vorgabe außen 220 Pixel breit sein (200px +10px +10px = 220px) mit einem verfügbaren Innenraum von 200 Pixel Breite. Korrekt implementiert wird das CSS Box Model von Opera, Internet Explorer 5 (Mac), Gecko (NS6, Mozilla, Galeon) und Internet Explorer 6.xx.
Nur der Internet Explorer 5.xx für Windows tut nicht, was wir uns wünschen. Im Gegensatz zur Vorgabe erzeugt er eine Box, welche jedoch aussen eine Breite von 200px aufweisst und nicht innen. Das heisst die innere Breite der Box beträgt nur noch 180px.

1
2
3

  <div style="width:200px; background-color:#FFFF00;border:10px solid black;">
    Diese Box sollte 200px breit sein und einen Rahmen mit der Dicke 10px haben. 200px+10px+10px = 220px
  </div>

So stellt der aktuell verwendete Browser diese Box dar:

Zum Vergleich, was die aktuellen Browser darstellen / darstellen sollten:

Internet Explorer 5/win

Boxmodell in Mozilla, Opera Version 5+ und Internet Explorer im Standardmode

Man mag es vielleicht hinnehmen, aber spätestens, wenn man mehrere Boxen nebeneinander oder untereinander setzt, kann dieser Box Model Bug des IE 5 (Win) das gesamte Layout zerschiessen

Für die Lösung dieses Problems gibt 4 verschiedene Workarounds (sog. Hacks), die ich hier vorstellen will (wobei nur die beiden Letzten, Nr.3 und Nr.4 wirklich empfehlenswert sind).

Pages: 1 2 3 4 5