Internet Explorer und transparente PNGs
11.09.2008
Wahrscheinlich hat sich schon jeder mal über dieses Machwerk diesen Browser der Firma Microsoft geärgert der mit schöner Regelmässigkeit dazu neigt die Freude über ein in Mozilla, Opera oder Safari funktionierenden Layouts zu trüben indem er es entweder leicht fehlerhaft anzeigt (was immernoch ärgerlich ist), oder gleich komplett zerstört.
Ein Punkt davon: IE6 und IE5 (IE7+ kann es mittlerweile, wir danken Gott dafür) können den Alpha-Kanal von 24bit PNGs nicht darstellen. Von weichen Transparenzen kann man nur träumen.
Layouts mit Elementen die zum Beispiel einen weichen Schatten werfen sind deshalb nur sehr schwierig zu lösen.
Allerdings haben sich darüber einige schlaue Leute Gedanken gemacht und einen der Lösungsansätze (von Angus Turnbull) möchte ich hier zeigen.
Man fügt innerhalb seiner CSS-Definition folgende Regel ein:
div, a
{
behavior: url(iepngfix.htc)
}
Dies wird nur vom Internet-Explorer interpretiert – anscheinend haben die Programmierer wiedermal gewusst dass die Grundlagen des IE mangelhaft sind und Hintertürchen eingebaut…
Die hinzugeladene Datei enthält JavaScript die es auch dem IE ermöglicht den Alphakanal korrekt darzustellen.
Wie genau das Ding funktioniert kann ich leider auch nicht erklären, wichtig ist mir nur DASS es funktioniert. Und das eigentlich ganz einfach:
Lade dir dieses Archiv herunter – es enthält die Datei iepngfix.htc, sowie die 1×1 Pixel große, transparente blank.gif
In Zeile 14 in iepngfix.htc muss der Pfad zu blank.gif angepasst werden, falls die beiden Dateien aus irgendwelchen Gründen nicht ins selbe Verzeichnis gelegt werden können.
PNG Grafiken werden jetzt in IMG-Tags und als Hintergrundbilder in DIVs korrekt dargestellt. Einzige Limitierung: gekachelte Hintergrundbilder mit Transparenz gehen immernoch nicht. Aber die Arbeit wird dadurch doch schon extrem erleichtert, finde ich.