In meinem Posting anlässlich des Erscheinens von Internet Explorer 9 habe ich darüber geschrieben, warum trotz der Fortschritte der neuen Version aus dem Hause Microsoft kein Web-Designer die Unzulänglichkeiten der Vorgänger verdrängen sollte. Die Vorgänger Internet Explorer 6 aus dem Jahre 2001, dessen verschlimmbesserter Nachfolger Internet Explorer 7 sowie der erstmals ordentlich an Webstandards orientierte Internet Explorer 8 sind immer noch da draußen … Es gibt also genug Gründe, sich die wichtigsten Links zu den unterschiedlichen Fähigkeiten der Browser sowie ein paar typische Probleme mit dem Problem-Opa IE6 samt Lösungsansätzen zu Gemüte zu führen. Dabei lässt sich ein Wiedersehen mit ungeliebten alten Bekannten wie dem Sternchen-Hack und anderen Filtern leider nicht verhindern.

In Sachen Kompatibilität kann man sich an verschiedenen Orten informieren, welcher Browser den CSS-Selektor x oder die Eigenschaft y schon unterstützt. Microsoft selbst hat in seinem Entwickler-Netzwerk MSDN einen Artikel CSS Compatibility and Internet Explorer samt tabellarischer Übersicht für alle Internet Explorer seit Version 5. Smashing Magazine vergleicht ebenfalls die CSS-Unterstützung der Browser-Versionen 6 bis 8 und deckt damit alle m. E. wichtigen IE-Versionen der Vergangenheit ab.

Grundsätzlich lässt sich sagen: Auch der IE8 weiß noch so gut wie gar nichts von CSS3, und er hat ganz und gar keine Ahnung von HTML5.

Und damit ein paar typischen Problemlösungen für die Vorgänger IE6 und IE7. Die folgende Auflistung erhebt keinen Anspruch auf Vollständigkeit, hebt aber auf typische Ärgernisse ab, die ein fleißiger, Webstandard-williger und Box-Modell-affiner Webseiten-Bauer in der Hektik des Alltags erlebt.

CSS position:fixed
Geht nicht. Workaround: position:absolute verwenden und drumherum dafür sorgen, dass die Seite nicht scrollt.

CSS Container mit top-left/bottom-right aufspannen
Geht nicht, der IE6 mag nur eine Ecke berücksichtigen. Workaround: Mit Höhen-/Breitenangabe arbeiten.

CSS height:100%
Geht nicht, schrumpft zusammen, solange das Elternelement keine feste Höhenangabe hat. Also

body {height:100%}
body div {height 100%}


damit der div-Container die gesamte Bildschirm-Höhe überlappt.

CSS min-height, min-width
Gibt’s nicht. Statt dessen interpretiert der IE die Eigenschaft height oder width wie min-height oder min-width, vergrößert also den Container falls nötig. Den besten (nämlich kürzesten, nur in einem CSS-Selektor, nicht im HTML-Code erscheindende) Hack gegen dieses Doppel-Übel habe ich bei Dustin Diaz gefunden:

div {
min-height:500px;
height:auto !important;
height:500px;
}


Dass sich alle ordentlichen Browser nach den ersten beiden Deklarationen richten, während der IE6 nur die letzte berücksichtigt, hängt mit einem weiteren Makel zusammen:

CSS !important
ist nicht immer so important. Wichtiger ist die Reihenfolge: Wenn dieselbe Eigenschaft mehrmals deklariert wird, dann berücksichtigt IE6 immer die letzte Variante – im vorigen Beispiel also height:500x, obwohl height:auto eine !important-Regel erhalten hat, an die sich alle anderen Browser halten.

CSS display:inline-block
Diese Mischung zwischen Inline- und Block-Element, die es erlaubt, einem Inline-Element eine Breite zu geben, kennt erst IE8. Für IE6 und 7 muss man wieder zu einem Sternchen-Hack greifen:

div {
*display:inline;
zoom:1;
width:100%;
}

Formatierungsfehler

In allen anderen Browsern sieht es gleich aus, nur der alte IE macht den Abstand etwas anders? In solchen Fällen sollte man für den Internet Explorer im CSS eigene Bemaßungen vorsehen, die von anderen Browsern ignoriert werden. Das geht einfach nach der Methode von Jonathan Snook mit Varianten, die sowohl von IE6 und IE7 als auch nur für IE6 interpretiert werden.

p {
border:1px solid green; /* works in all */
*border:1px solid red; /* targets IE6 and 7 */
_border:1px solid blue; /* targets IE6 */
}


Diesen Abschnitt sehen Sie nur dann mit einem blauen Rand, wenn Sie IE6 benutzen, und mit rotem Rand im IE7. Ordentliche Browser zeigen die Grünkante!

:hover
IE6 unterstützt diese Pseudoklasse nur für Links (a:hover) und sonst gar nicht. Punkt.

Transparenz, Farbverläufe, Schatten
Microsoft hat für diese CSS3-Verschönerungs-Effekte ein proprietäres Attribut namens filter geschaffen. Standardkonform ist es nicht, wird also im HTML-Validator einen Fehler auswerfen.

hasLayout
hasLayout ist ein weiteres Microsoft-eigenes Attribut, auf das man im Zusammenhang mit Darstellungs-Problemen von Boxen, ihren Hintergründen und Rahmen im Internet Explorer 6 und 7 häufiger stößt. Ein Microsoft-Entwickler beschreibt das so: „There are several bugs in Internet Explorer that can be worked around by forcing ‚a layout‘ (an IE internal data structure) on an element (like, dimensional bug fixes and Holly hack).“