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 »

Verwandte Beiträge

Kommentare & Trackbacks

  1. Kommentar von Heiko:

    Gravatar 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.

  2. Kommentar von Christian:

    Gravatar von Christian

    Super, vielen Dank für diesen Betrag!

Kommentar schreiben

* Pflichtfelder


all-inkl.com webhosting