22.05.2008

IE-Doubled-Float-Margin-Bug:
Der Internet-Explorer 6 verdoppelt Abstände

Der Internet-Explorer 6 hat die schlechte Eigenschaft, Abstände eines Div's unter bestimmten Voraussetzungen zu verdoppeln.

Der sogenannte "IE-Doubled-Float-Margin-Bug" tritt dann auf, wenn ein Div gefloatet ist und zur gleichen Seite der Float-Angabe ein Abstand definiert ist.
Bei folgenden Kombinationen tritt dieser Bug auf:

float: left;
margin-left: 50px;

oder

float: right;
margin-right: 50px;

Statt des vorgegebenen Abstandes von 50 Pixeln verdoppelt der IE 6 diesen Wert auf 100px.

Zur Demoseite
Hinweis: der Effekt der Abstandsverdoppelung ist natürlich nur im Internet-Explorer 6 ersichtlich. Andere Browser stellen den Abstand korrekt dar.

Nun könnte man speziell für den IE 6 einen "conditional comment" angeben und für ihn statt der gewünschen 50px eben nur 25px hinterlegen (weil er diesen Wert ja verdoppelt).
Wird später der Abstand geändert, wäre auch für den IE 6 ebenfalls wieder eine neue Sonderangabe erforderlich.

Einfacher ist es, dem entsprechenden Element zusätzlich ein display: inline; zuzuweisen:

float: left;
margin-left: 50px;
display: inline;

Damit stellt auch der Internet-Explorer 6 den gewünschten Abstand korrekt und ohne Verdoppelung dar.

nach oben