Dass der IE6 keine PNG-Dateien mit Alpha-Transparenz unterstützt ist uns allen bewusst. Dafür gibt es jedoch ein paar mehr oder weniger gute Fixes.
Zuvor nutzten wir selber ein Fix bei dem eine transparente GIF-Datei hinterlegt werden muss. Dadurch wurden die transparenten PNGs zwar im IE6 auch transparent angezeigt, jedoch mit verspätung. Außerdem ist diese Lösung wahrscheinlich nicht die optimale für den IE6, da dieser sehr langsam wurde.
Jetzt gibt es eine sehr gute Alternative.
Der neue Fix für den IE6 und seinen PNG-Problemen benötigt weder ein transparentes GIF noch irgendwelche angaben von unvaliden Funktionen (behavior) in den CSS-Dateien.
Das Script ist zunächst hier zu finden:
DD_belatedPNG_0.0.8a-min.js von Drew Diller
Ist die Datei heruntergeladen, wird diese in unser Projekt kopiert und wie folgt in unser Dokument eingebunden.
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('');
</script>
<![endif]-->Jetzt können wir unsere Elemente, welche transparente PNG-Dateien beinhalten einfach per CSS-Klasse, CSS-ID oder direkt mit Tag ansprechen.
Um die extra Definition vieler Kleinigkeiten zu vermeiden, nutzen wir unter anderem eine Klasse namens „ie6trans“, welche einfach den transparenten Objekten per class=“ie6trans“ zugeordnet werden kann.
Diese und alle weiteren unserer Klassen und IDs werden nun wie folgt dem Script mitgeteilt.
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.ie6trans, .klasseXY, #ID_head');
</script>
<![endif]-->Schaut ihr euch das Ergebnis im IE6 an, werde ihr feststellen, dass die Elemente, dessen Klassen und IDs dem Script zugewiesen wurden, nun transparent sind.
Wie gesagt, das ganze ohne transparentes GIF und unvalide CSS-Funktionen.
Seither nutzen wir ausschließlich dieses Script und hatten bisher nie Probleme.
Vielen Dank für’s Lesen und viel Spaß mit euren transparenten PNGs.
