Transparente PNGs mit dem IE6

Bisher habe ich mich immer etwas davor gedrückt. Ich gebe es ja zu. Habe es immer geschafft, auf diese wunderbaren PNGs zu verzichten. Der Grund: Unser lieber IE6 und seine Vorgänger wollten von der ganzen Sache nichts wissen und haben die Transparenz in seltsame Hintergrundfarben verwandelt.

Bei meinem aktuellen Projekt wollte ich aber einfach nicht mehr darauf verzichten. Google hat mich auch ziemlich schnell auf die richtige Fährte bebracht. Die Lösung: iepngfix.htc

Das ist ein Skript, dass den IE5.5 und den IE6 dazu bringt, die Transparenz der PNGs richtig anzuzeigen. Es funktioniert bei mit IMG-Tag eingebundenen PNGs sowie mit Hintergrundbildern. Die Verwendung ist sehr einfach.

1. IE PNG Fix herunterladen. Es sind alle nötigen Dateien und ein Beispiel in der Zip vorhanden.
2. Die Dateien “iepngfix.htc” und die “blank.gif” auf den Webserver hochladen.Sollte die blank.gif nicht im Grundverzeichnis liegen, muss die iepngfix.htc angepasst werden. Dazu kurz mit einem Editor öffnen (z. B. mit Notepad++) und in Zeile 15 den Pfad zur blank.gif anpassen.
3. Diesen Code in eine CSS einbauen und ggf. den Pfad zur iepngfix.htc anpassen:

   img, div {behavior: url(iepngfix.htc);}

Der Nachteil: Die Stylesheet ist nach dem Einbau leider nicht mehr valide. Meine Lösung hierzu: Conditional Comments. Das heißt, ich habe den CSS-Code in eine eigene CSS ausgelagert und binde diese nur für den IE6 und den Vorgängerversionen ein. Der Code hierzu:

<!--[if lte IE 6]>
	<link rel="stylesheet" href="styleIE6.css" type="text/css" media="screen" />
<![endif]-->

Bei mir funktioniert alles wunderbar, hoffe bei euch auch.

Links zu diesem Thema:

• Offizielle Seite von TwinHelix zum IE PNG Fix
• Der Artikel von Dr. Web, der mich auf die richtige Spur gebracht hat