IE CSS Bugs That’ll Get You Every Time

IE 6 hatte tatsächlich die beste CSS-Unterstützung aller Browser, als er herauskam... vor SIEBEN Jahren. Die kleinen Fehler in seiner CSS-Unterstützung verfolgen uns bis heute. Ich erhalte immer noch Kommentare von Leuten, die jede Technik rundweg ablehnen, die in IE 6 nicht funktioniert. Obwohl ich generell davon absehe, den Einschränkungen von IE 6 nachzugeben, halte ich es dennoch für wichtig, Dinge darin so gut wie möglich richtig aussehen zu lassen. Hier sind die wichtigsten Bugs in IE, die dich jedes Mal erwischen werden.

Das Box-Modell

Dies ist vielleicht der häufigste und frustrierendste Fehler überhaupt in IE 6 und darunter. Nehmen wir an, Sie deklarieren eine Box wie diese

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE 6 berechnet die Breite der Box auf 100px.
Moderne Browser berechnen die Breite der Box auf 124px.

Diese Art von Diskrepanz kann zu RIESIGEN Layout-Problemen führen. Ich denke sogar, die IE-Version ergibt logisch etwas mehr Sinn, aber so wurde die Spezifikation nicht geschrieben. IE 6 kann es tatsächlich richtig hinbekommen, wenn Sie sich im Standardmodus befinden, was heutzutage selten ist, da bereits die Verwendung eines HTML 4.0 Transitional Doctype den Quirks-Modus und das Box-Modell-Problem auslöst.

Ich arbeite im Allgemeinen an diesem Problem vorbei, indem ich einfach keinen Abstand (padding) für Boxen verwende, die ich für das Layout nutze. Wenn diese Box einen Text in einem <p>-Element enthält, wende ich den benötigten Abstand direkt auf dieses p-Element an. Das umgeht das Problem einfach, aber es funktioniert.

 

Der Doppel-Abstand-Bug

Unter Verwendung unseres obigen Box-Beispiels, nehmen wir an, wir müssen diese nach rechts floaten

div#box {
   float: right;
   margin-right: 20px;
}

IE 6 wird die 20px auf 40px verdoppeln. Wiederum kann dies zu potenziell riesigen Layout-Problemen führen. Die üblicherweise verbreitete "Lösung" dafür ist, "display: inline;" zum Div hinzuzufügen. Ich bin mir nicht sicher, wie diese "Lösung" so viel Zuspruch gefunden hat, aber sie ist eher unpraktisch. Wir können keine statischen Breiten für Inline-Elemente festlegen, oder?

Ich umgehe diesen Bug auch gerne, wann immer möglich. Wenn Sie diese Box wirklich vom rechten Rand ihres Elternelements wegdrücken müssen, können Sie dies wahrscheinlich tun, indem Sie dem Elternelement Padding hinzufügen, was Ihre Gitterstruktur sowieso eher konsistent hält. Vergessen Sie auch nicht das Padding. Dieser Bug beeinträchtigt das Padding nicht, sodass Sie oft damit durchkommen, Padding zur benötigten Seite hinzuzufügen, um dasselbe Ergebnis zu erzielen.

 

Keine Min-Breiten / Min-Höhen

Das Festlegen von min-width und min-height für Elemente ist so natürlich und logisch, dass es mir manchmal Tränen in die Augen treibt, wenn ich daran denke, dass ich mich nicht darauf verlassen kann. IE 6 macht es nicht nur falsch, er ignoriert es einfach komplett. Min-height ist unglaublich nützlich für etwas wie ein Footer. Sagen wir, Ihr Footer muss mindestens 100 Pixel hoch sein, weil Sie dort ein Hintergrundbild verwenden, aber Sie möchten keine statische Höhe festlegen, da Sie möchten, dass er schön wächst, wenn beispielsweise die Textgröße deutlich erhöht wird. Min-height ist perfekt dafür, aber die alleinige Verwendung führt bei IE 6 zu keinerlei Höhe. In einer bizarren Wendung des Glücks behandelt IE 6 die normale Höhe-Eigenschaft so, wie moderne Browser min-height behandeln, sodass Sie einen "Hack" verwenden können, um dies zu beheben. Ich nenne es einen "Hack", weil ich es nicht wirklich als Hack betrachte, da es perfekt validiert.

 

Stepdown

Normalerweise können Sie beim Floaten von Objekten darauf zählen, dass sie sich vertikal ausrichten, bis sie brechen. Das heißt, Sie könnten, wenn Sie nicht IE 6 verwenden würden. IE 6 fügt einen Zeilenumbruch-Effekt nach jedem gefloatenen Block-Element hinzu, der zu einem "Stepdown" führt. Die Lösung hier ist, sicherzustellen, dass die Zeilenhöhe im Elternelement auf null (0) gesetzt ist oder dass die gefloatenen Elemente Inline-Elemente sind. Mehr über das Verhindern von Stepdown hier.

 

Keine Hover-Zustände

Die meisten modernen Browser unterstützen Hover-Zustände für praktisch jedes Element, aber nicht IE 6. IE 6 unterstützt die Hover-Pseudo-Klasse nur für Anker (<a>) Elemente, und selbst dann erhalten Sie sie nicht, wenn Ihr Anker kein href-Attribut hat. Die Lösung hier ist, eine proprietäre Lösung zu verwenden oder einfach damit zu leben, dass Sie keine Hover-Zustände für alles haben, was Sie wollen.

 

Keine Alpha-Transparenz-PNG-Unterstützung

Ziemlich lustig, dass Microsoft selbst das PNG-Format entwickelt hat, aber ihr eigener Browser es nicht nativ unterstützt (bis IE 7)*. Ich habe eine ganze Sammlung von verschiedenen Lösungen dafür. Beachten Sie, dass normale, nicht alpha-transparente PNG-Dateien ohne eine Lösung in IE 6 einwandfrei funktionieren und oft besser sind als ihre GIF-Schwestern.

*Update: Ich lag völlig falsch mit der Sache mit Microsoft, keine Ahnung, wie mir das in den Kopf kam. Tom Boutell hat das PNG-Format entwickelt. Danke an alle!

 

Also…

All diese Bugs sind entweder behebbar oder umgehbar, aber sie werden dich erwischen, wenn du nicht testest. Meine allgemeine Philosophie ist: Entwerfen Sie mit den modernsten Techniken, aber stellen Sie dann einfach sicher, dass es in älteren Versionen nicht kaputt ist.