Wer nicht nur jpg's und gif's in seine Homepage einbinden will, sondern auch auf png's mit Transparenzen zurückgreifen möchte, steht vor der Miserie, dass zwar aktuelle Browser wie Safari, Firefox und der Internet Explorer 7 die Bilder unterstützen, der etwas ältere IE 6 jedoch – standardmäßig – nicht. Das Problem sollte nicht unterschätzt werden, denn laut einer Browser Statistik von Prima Web Tools nutzen immer noch 31.4% den Internet Explorer 6.0 (Stand Januar 2008). Wie kann man sich also Abhilfe schaffen?

Während meiner Recherche im Web nach einer Lösung bin ich auf eine einige Workarounds gestoßen, von denen entäuschender Weise viele nicht funktioniert haben oder png's nur als Image, nicht aber als background-image unterstützten. Abhilfe schaffte da erst der IE PNG Fix v1.0 RC4 von Angus Turnbull. Die Anwendung des png-Fix ist so einfach wie effektiv:

Als erstes lädt man sich die 15kb kleine Zip-Datei herunter. In dem Archiv sind 6 Dateien enthalten, von Relevanz ist jedoch nur die iepngfix.htc. Diese kopiert man sich in sein Projekt-Verzeichnis. Alles, was man jetzt noch tun muss ist per CSS auf die .htc zu absolut zu verweisen, beispielsweise über einzelne ID's oder Klassen. Ich bevorzuge den Universalselektor "*":

* {
_behavior: url(http://www.beispiel.de/iepngfix.htc);
}

Der Hack _behavior bewirkt, dass nur der Internet Explorer 6.0 die Eigenschaft "behavior: url();" interpretiert, alle anderen Browser werden die Eigenschaft ignorieren.

Was jetzt noch fehlt ist die blank.gif, die aus der Zip-Datei in den images-Ordner kopiert werden muss.

Wer mit dem Workaround arbeiten will, muss jedoch kleine Einschränkungen in Kauf nehmen, die aber meiner Meinung nach nicht tragisch und teilweise auch umgehbar sind. Angus Turnbull schreibt dazu folgendes:

• Can't help IE versions prior to 5.5.
• Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that.
• The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
• It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
• Background PNG images can't be tiled. This is a limitation of the IE filter.
• Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

Trotz dieser "Known Issues" ist der IE PNG Fix von Angus Turnbull meiner Meinung nach die beste Lösung, um beim IE 6.0 in den Genuss von png-Bildern zu kommen.

Wer zu Testzwecken mehrere Versionen des IE auf seinem Rechner installieren will, sollte sich das Programm Multiple IE unter http://tredosoft.com/Multiple_IE herunterladen und installieren. Man kann wahlweise die folgenden Internet Explorer installieren:



Und unter http://www.apple.com/de/safari/download/ findet ihr noch die aktuelle Beta 3 von Safari, die jetzt unter Windows XP und Vista läuft!