IE und CSS

Boxmodel-Mathematik

Box-Model-Bug reparieren »

Die magische Vergrößerung eines Containers

Ein simpler Trick, der bereits Generationen von Entwicklern in den Wahnsinn getrieben hat.

Donauflussschifffahrtskapitänsanwärter

{
width: 100px;
}

DAS sind 100px ...

Inhalt fließt aus der Box heraus (korrekt)

IE sagt: Box paßt sich dem Inhalt an (falsch)

Math for Beginners

MS gibt Dir eben mehr ...

text
#orangebox {
margin-left: 100px;
}

DAS sind 100px ... hallo?

Der Boxmodel-Bug

oder: Die magische Nicht-Vergrößerung eines Containers

kurzer Text

ein Text mit nicht so vielen Worten

{
width: 100px;
padding: 10px;
border: 3px solid #f00;
}

border + padding + width + padding + border

3 + 10 + 100 + 10 + 3 = 126px Breite (korrekt)

IE sagt: Box ist nur 100px breit. Der Raum für den Content verringert sich auf 74px (falsch).

Der Effekt des IE-Boxmodel-Fehlers auf pixelgenaue Layouts ...

Box .b1
Box .b2
Box .b3
#wrap {
width: 300px;
height: 100px;
border: 1px solid #f00;
}
.b1, .b2, .b3 {
float: left;
width: 100px;
height: 100px;
}

Container *wrap* (300px breit) umspannt drei Boxen à 100px Breite (korrekt).

IE sagt: Die Border wird nicht zur Breite hinzugerechnet, deshalb reicht der Platz innerhalb des Containers *wrap* nicht aus - die rechte Box rutscht nach unten (falsch).

Das kann selbst bei simpler Kursiv-Schrift tödlich sein ...

lorem ipsum

lorem ipsum

{
width: 200px;
}

Schrift bleibt in der vorgegebenen Breite der Box (korrekt).

IE sagt: Box wird durch die kursive Schrift verbreitert (falsch).

Mehr?

Start | Seite 1 | Seite 2 | Seite 3 | Seite 4 | BoxFix | Rätsel


Übersicht | Inhalt der CD