IE verdoppelt margin eines Floats in float-Richtung – was man dagegen tun kann
Bei Floats verdoppelt der Internet Explorer ein margin, das in Floatrichtung eingefügt wird. Bei einem nach links gefloateten Element mit einem margin-left von 10px macht der IE daraus 20px.
Lösung:
Einem Float mit margin in Floatrichtung immer ein “display: inline;” hinzufügen.
Indem ein Element gefloatet wird, wird es automatisch Blockelement. Die Eigenschaft “display: inline” ändert daran nichts. Sie wird ignoriert.
Einziger Effekt: im IE wird die fehlerhafte Verdoppelung des margins behoben.
#FloatElement
{
float: left;
margin-left: 10px;
display: inline;
}
Mehr CSS-Tipps: CSS-FAQ »






Kommentar von Heiko:
Der “IE Doubled Float-Margin Bug” läuft einem wirklich öfter über den Weg. Bei http://www.positioniseverything.net wird dieses browsertypische Problem des IE etwas näher erläutert.
17. März 2006 um 09:22
Kommentar von Christian:
Super, vielen Dank für diesen Betrag!
1. August 2007 um 08:46