IE 6 und dop­pel­tes margin

… und wie­der einen tol­len Entwurf fer­tig gestellt. Schaut super aus. Die gän­gi­gen Browser (Opera, Firefox, Safari, Chrome und selbst der IE 7+) inter­pre­tie­ren das Layout wie gewünscht, auch wenn der immer noch feh­lende CSS3 Support etwas ner­vig ist.

Nur lei­der gibt’s noch ein Problem: die defi­nierte Zielgruppe hat nach Analyse zu 18% den Internet Explorer 6 im Einsatz. Immer noch so viel. Okay, star­ten wir den mal … und machen ihn nach Begutachtung ganz schnell wie­der zu — grau­en­voll. Das Layout ist ziem­lich zerschossen.

Dieses Szenario ist wohl vie­len bekannt Oftmals sind die Eigenheiten der IE-Familie etwas ner­vig und man muss sich damit rumschlagen.

Nach und nach werde ich ver­su­chen die bekann­tes­ten Bugs im IE hier zu sam­meln und zu erläu­tern sowie die gän­gis­ten Workarounds auf­zu­zei­gen. Heute fan­gen wir mal mit dem Double Margin-Problem an.

Nehmen wir mal an, wir haben zwei nette kleine Container, die neben­ein­an­der ange­ord­net wer­den sollen.

#left_wrapper, #right_wrapper {
   width: 300px;
   float: left;
   height: 120px;
   margin-left: 10px;
}

Ganz sim­ples Beispiel sollte man den­ken. Aber der IE 6 zeigt selbst bei die­sem Beispiel schon ein erschre­cken­des Ergebnis: der Abstand nach Links ist dop­pelt so groß wie er sein sollte — näm­lich 20 Pixel. Warum?

Grund

Wird ein Element mit der CSS-Eigenschaft float aus­ge­zeich­net, sollte durch den Browser auto­ma­tisch die dis­play–Eigenschaft auf inline gesetzt wer­den. Das geschieht aller­dings beim IE 6 nicht. Allerdings tritt die­ses Verhalten nur auf, wenn die float–Richtung und mar­gin–Angabe in die glei­che Richtung gesetzt wer­den (wie hier: links).

Workaround / Lösung

Die Lösung ist rela­tiv ein­fach: das ent­spre­chende Element mit der float–Angabe bekommt zusätz­lich die Eigenschaft:

display: inline;

Anbei noch eine Datei, die die­sen Bug demonstriert…

IE 6 Doube Margin

Weiterführende Hilfe

Du hast trotz­al­lem Probleme bei der Darstellung? Poste ein­fach einen Kommentar und hin­ter­lass’ deine E-Mail, dann ver­su­chen wir das zu behe­ben