Double-float margin Bug im IE6
An diesem Bug im Internet Explorer 6 und älter ist vermutlich jeder Webentwickler in seinen Anfängen mit CSS schon einmal halb verzweifelt!
Zum testen der Seiten verwenden die meisten Entwickler wegen der guten CSS-Unterstüzung den Firefox. Hat man eine Seite fertiggestellt und prüft diese dann in den anderen gängigen Browsern kommt nicht selten die bösen Überraschung. Layout zerschossen! Was den Internet Explorer 6 und die Versionen davor angeht tritt hier oft der “double-float margin Bug” auf.
Hier ein Beispiel unter welchen Bedingungen der Bug auftritt:
HTML:
<html>
<head>...</head>
<body>
<div id="wrapper">
<div id="beispielbox"></div>
</div>
</body>
</html>
CSS:
#beispielbox {Wenn man auf ein Element welches zum Beispiel mit einem float:left; versehen ist zusätzlich ein margin:left; anwendet tritt der Bug auf. Der eingesetzte Wert für den Abstand nach links (hier 25 Pixel) wird vom Internet Explorer verdoppelt. Um Float und Margin in “eine Richtung” im IE6 trotzdem verwenden zu können gibt man dem gefloateten Element einfach ein display:inline; um den Bug zu beheben.
width:100px;
height:100px;
float:left;
margin-left:25px;
}
