der Box-Modell-Fehler

Veröffentlicht am by von Anne Mühlbauer (neontrauma)

Wer im Code seiner Webseite mit margin und padding arbeitet und sich die Seite anschließend in Firefox und im Internet Explorer ansieht, der schickt wahrscheinlich erst einmal einige kräftige Flüche gen Redmond:
was im Firefox und anderen auf der Gecko-Engine basierenden Browsern ordentlich aussieht und auch als valider Quellcode verifiziert wurde, verschiebt sich im IE.

Grund: der sogenannte Box-Model-Bug.
Im Internet Explorer bis zur Version 5.5 sowie in der Version 6 im Quirksmode sorgt dieser Fehler für eine “schiefe” Darstellung.

das Box-Modell

In der Spezifikation für CSS 2 wird definiert, wie sich die Dimensionen eines Elements (beispielsweise eines Divs) berechnen: auf die Angaben zu Höhe und Breite eines Elements werden zusätzlich noch diejenigen Pixel draufgerechnet, die durch Padding und Rahmenbreite entstehen.
Wenn man einem Div also sagt, es solle eine Breite von 200 Pixeln haben und es mit einem 5 Pixel breiten Rahmen versieht, dann ist es insgesamt 210 Pixel breit.

der Box-Modell-Fehler

Der IE bis 5.5 sowie der IE 6 im Quirksmode sträubt sich hier gegen die allgemeine Regelung und zieht die Werte für Padding und Rahmenbreite stattdessen von der Breite ab, anstatt sie hinzuzurechnen: unser oben beschriebenes Div wäre im IE also nicht 210, sondern nur 200 Pixel breit.
Auch der Opera in den Versionen 7.0 bis 8.54 verfährt so.

Abhilfe schaffen

Du hast verschiedene Möglichkeiten, um dieses Fehlverhalten zu korrigieren.

Zunächst solltest du die Doctype-Deklaraton verwenden, damit kein Browser in den Quirksmode zurückfällt, sondern im Standardmode bleibt. Dadurch versucht der Browser sich so gut es geht an die standardkonforme Verarbeitung des Stylesheets zu halten. Noch vor dem öffnenden html-Tag fügst du ganz zu Beginn deiner Datei folgenden Code ein:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Zu Beginn deines Stylesheets solltest du sämtlichen Elementen zunächst einmal einen Außen- und Innenabstand von 0 zuweisen, um eine Grundlage für die Darstellung in den verschiedenen Browsern zu schaffen:

*{
margin: 0;
padding: 0;
}

Wenn du zwei verschachtelte Elemente hast, solltest du den Abstand zwischen ihnen lieber über einen margin des inneren Elements als über ein padding des äußeren Elements realisieren.

Eine weitere Methode stellt der nach seinem Erfinder benannte Tantek-Hack dar, zu dem du hier eine anschaulich, deutschsprachige Erläuterung findest.

Dieser Hack gilt ein wenig als umstritten – ganz im Gegensatz zu der nächsten Methode, der Browserweiche.

Browserweiche / Conditional Comments

Hierbei legst du ein eigenes Stylesheet für den Internet Explorer an, das nur von diesem erkannt wird. Alle anderen Browser ignorieren es. In dieser Browserweiche definierst du nun die relevanten Angaben für den IE, wobei du sogar verschiedene Versionen ansprechen kannst.

Im Head-Bereich des Quellcodes fügst du Folgendes ein (wobei du natürlich variieren kannst, wie explizit du eine bestimmte Version ansprechen möchtest):
<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css">@import url(ie5-6.css);</style>
<![endif]-->

<!--[if lte IE 5.5999]>
<style type="text/css">@import url(ie55-.css);</style>
<![endif]-->

<!--[if gte IE 5.5]>
<style type="text/css">@import url(ie55+.css);</style>
<![endif]-->
“lt” steht für less-than (alles vor dieser Version); “gte” bedeutet greater-than or equal (diese Version sowie alle höheren); “lte” steht analog dazu für less-than or equal (diese Version sowie alle niedrigeren).
Normalerweise reicht es, wenn du für alle Versionen des IE bis einschließlich 5.5 ein alternaties Stylesheet angibst. Hier musst du einfach ein wenig ausprobieren und deine Seite in den verschiedenen Browsern und Versionen testen, bis sie korrekt dargestellt wird.

verwandte Beiträge

7 Gedanken zu “der Box-Modell-Fehler”

  1. klasse! vielen, vielen dank! ich plag mich schon unendlich lange mit dieser sache rum und auch über suchmaschinen habe ich da nichts zu gefunden, weil ich nicht genau wusste wie man diesen fehler nennt.
    ich freu mich gerade einen keks xD

  2. Ich habe das Problem immer über so eine *Sternchen-Variante gelöst, die ich bei selfhtml gefunden habe… Damit konnte man dem IE auch eine extra Eigenschaft zuweisen… Und die Seite, die getestet hat, ob mein Quellcode valide ist, hat das auch nicht kritisiert… ôo
    Allerdings ist das mit der extras Styledatei wahrscheinlich die Professionellere Lösung. ^^
    Werde ich beim nächsten Layout mal ausprobieren…
    Weißt du zufällig, welche IE-Versionen am meisten voneinander abweichen? Also bei welchen es sinnvoll ist, eine Unterscheidung zu machen…? Ich hab nur einen IE auf dem Computer und wollt ja eigentlich nicht in 5 versch. IEs testen. xD Macht ja auch keinen Sinn, wenn sich einige ähnlich sind.
    Irgendwo hatte ich dann mal gesehen, dass man zwischen IE7 und allem unter IE7 unterscheiden soll. Meinst du, das reicht aus?
    Liebe Grüße.

  3. Hej,
    die Variante mit den Sternchen davor nennt man Star-Hack; allerdinhs kann man hier nicht zwischen verschiedenen Versionen des IE unterscheiden. Von daher finde ich ihn nicht allzu praktisch.

    Die Unterscheidung zwischen IE7 und allem darunter macht Sinn, ja. Denn der IE 7 hat zwar etliche der bisher bekannten Bugs behoben – kommt aber stattdessen mit vielen neuen Fehlern daher. (nachzulesen etwa hier.

  4. hej. schön erklärt. allerdings frage ich mich, wie man das so schön umsetzen soll. ich hab zufällig nicht alle ie versionen auf dem pc;)
    und meistens benutz ich sowieso ff (ist einfach besser). obwohl ich natürlich schau ob mein layout am ende in beiden browser vernünftig aussieht. dazu wechsel ich dann aber in meinem ff in de ie (addon). naja
    weis ja nicht ob dich sowas interessiert aber en beitrag zu ff und dessen addons (hauptsächlich die guten;) ) wär mal ganz schön.

  5. Hej,
    standardmäßig lässt der Internet Explorer auch immer nur eine installierte Version zu. Trotzdem kann man das austricksen und mit Hilfe eines kleinen Programms verschiedene Versionen nebeneinander laufen lassen, eben um zu testen, wie eine Webseite dargestellt wird.
    In der Praxis muss man imho aber nur die Darstellung im IE6 und im IE7 prüfen; ältere Versionen dürfte kaum noch jemand verwenden.

    Über die FF-Addons schreibe ich demnächst mal, gute Idee! =)

  6. Ich wollt da mit der Unterscheidung jetzt ins neue Layout direkt einbauen…
    Hab ich das jetzt so richtig verstanden: Ich mache einmal eine style-datei für is IE 7, eine für if lt IE 7 und eine stinknormale, die ich so notiere, wie ich die sonst auch immer notiert habe, ja? Die wird dann vom FF genommen, ne? ^^
    Und muss ich dann in die style-datein für den IE 7 und lt IE 7 auch jeweils den kompletten Code packen? Eigentlich schon oder? xD
    Vielen Dank schon mal. =)