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
- Firefox CSS-Viewer: Blick hinter die Kulissen
- CSS-»Faux Columns« bzw. »Unechte Spalten« auf deutsch
- YAML 2.4 - update
- YAML - Clearing von Fließumgebungen mit .floatbox
- CSS - Geheimnisse gelüftet
- CSS-Schiebetürnavigation
- CSS - Elemente absolut positionieren
![bueltge.de [by:ltge.de]](http://die.netzspielwiese.de/blog/wp-content/uploads/2006/03/bueltge.ico "bueltge.de [by:ltge.de]")
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