nicht angemeldet
Zur Ehrenrettung des IE sei hier angemerkt, dass er die Breite der Box im sog. "standards-compliant-Mode" ebenfalls korrekt berechnet.
Aber wohl nur der IE 6.
Die Lösung des Problems besteht also in einer korrekten Dokumententyp-Angabe incl. URL.
z.B.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Box-Breiten-Test</title>
</head>
<body>
<h2>Box-Breiten-Test</h2>
<div style="width:100px; padding:5px; border:solid blue 10px; margin:20px; background:yellow;">
<img src="nix.gif" width="100" height="20" alt="nix" border="0">
</div>
<div style="width:100px; padding:5px; border:solid red 10px; margin:20px; background:yellow;">
100 Pixel
</div>
</body>
</html>
Mit dieser Angabe verhalten sich Opera 6, Mozilla 0.9.7 und auch IE 6 identisch (zumindest, was die Berechnung des Box-Modells anbelangt.)
Obiges Beispiel erzeugt in Opera etc. zwei exakt gleichbreite Boxen, während IE 5.0 (nur den habe ich gerade parat) rumzickt und die untere Box INSGESAMT 100 Pixel breit macht (inklusive Rand), während die obere Box durch die 100 Pixel breite Grafik erzwungenermaßen einen 100 Pixel breiten Content hat, plus Rahmenpixel.
Vorsicht: Bei XHTML-Dokumenten sollte man auf die XML-Definition zu Beginn verzichten, da der IE6 dödeligerweise ansonsten nicht in den "Standards-compliant-Mode" schaltet. :-(
Ich habe den Eindruck: Ob nun "standards-compliant" oder nicht, IE interpretiert CSS falsch, und aus damit.
- Sven Rautenberg