Manchmal benötigt man trotz der Möglichkeit transparente Bilder durch das GIF-Format darzustellen auch transparente PNG-Grafiken, da erst diese über Alphatransparenz verfügen und so ein sauberes Anti-Alaising ermöglichen.
Leider ist eine Darstellung von transparenten PNG Dateien im geliebten IE6 standardmäßig nicht möglich. Da trotz des Versuches von Microsoft mit einem Zwangsupdate auf den Internet Explorer 7 noch viele mit der alten Version im Internet unterwegs sind muss man sich etwas überlegen.
Im Internet kursieren ein paar Ansätze um dieses Problem zu beseitigen. Allerdings nur in Form von Javascript Lösungen, die meist umständlich einzubauen sind oder das konkrete Problem nicht richtig erfassen.
Meine Lösung um transparente PNG-Grafiken im alternden Internet Explorer 6 anzuzeigen funktioniert mit CSS. Nehmen wir an, wir wollen ein transparentes PNG als Hintergrundbild eines Layers definieren.
Vor dem Hack kommt zuerst der Code für andere Browser, die transparente PNG Files unterstützen. Anschließend wird über einen CSS-Hack der IE6 Code eingebunden:
<style type="text/css"> #layer { background-image:url(bild.png); } </style> <!--[if IE 6]> <style type="text/css"> #layer { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale'); background:none; } </style> <![endif]-->
Den Code kann man natürlich auch in eine externe CSS Datei auslagern. In meiner Lösung muss man zusätzlich background:none; setzen, das liegt am zuvor definierten background-image.
Die von mir verwendete Methode mit dem AlphaImageLoader wird offiziell von Microsoft auf einer Support Seite empfohlen. Wer mehr über den AlphaImageLoader erfahren möchte, der sei auf das Internet Explorer Developer Center im MSDN verwiesen.
Leider ist dieser IE 6 Hack nicht standardkonform und wird im CSS Validator durchfallen. Wer allerdings noch eine signifikante Anzahl an IE6 Besuchern hat, sollte den Hack auf jeden Fall benutzen oder notfalls auf transparente GIFs zurückgreifen. Bei mehreren PNG Dateien auf einer Website kann das Einfügen dieses Codes lästig sein, in dem Fall würde ich zu einer globalen Javascript Lösung greifen.
[...] Transparente PNG-Grafiken im Internet Explorer 6 Transparente PNG-Grafiken im Internet Explorer 6 ie6 transparency Tags: Transparente PNG Grafiken Internet Explorer ie6 transparency [...]
Kann der IE 5.X keine durchsichtigen PNGs anzeigen?
Der Artikel ist schon mal sehr gut… Der Unterschied immer im IE FF ist schon etwas nervig….
Hat bei mir blendend geklappt ! Herzlichen Dank ! Bleibt nur die Frage ist das in 2 Monaten überhaupt noch nötig diese Vorgänge exta für den IE zu tätigen, wenn selbst Google keine Unterstützunge mehr bieten möchte?
Guß
Netter Artikel.
In meinen Tests war es erforderlich, dem Layer die IE-Eigenschaft hasLayout zu geben. Z.B. über zoom:1.
Andernfalls wurde das Bild nicht dargestellt. Ausserdem finde ich, dass das background-image Verhalten besser durch sizingMethod=’crop’ simuliert wird. Also:
#layer{
zoom:1; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bild.png’, sizingMethod=’crop’);
background:none;
}
@Steffen:
Dummerweise wird der IE6 ja gerade in großen Konzernen noch eingesetzt. D.h. z.B. für Banken-Intranet-Anwendungen und Co. Du würdest staunen, wo der IE6 noch so alles läuft. Ich nehme an, die können den IE6 nicht einfach so abschaffen, weil seinerzeit die Intranetanwendungen in übelstem HTML und Javascript erstellt wurde, das ganz gezielt nur den IE6 unterstützt. Die Umstellung kostet diese Unternehmen mit Sicherheit einen Haufen Geld.
Entwickelst Du also Websites für Unternehmen, die diese Großkonzerne als Kunden ansprechen wollen, wirst Du um den IE6 nicht drumherum kommen.
Viele Grüße.
Danke für den Tipp doch bei mir funktionieren die Links, die sich im Div befinden nicht… sehr kommische? Ideen???
geht net
[...] [...]
Bleibt noch zu erwähnen, das der Filter die Bilder nicht relativ zum Stylesheet zieht sondern relativ zur Position des Elements auf das er angewendet wird.
in einem externen stylesheet brauchts also absolute urls um zu funktionieren…
Vielen Dank für den Artikel! Viele sagen, es wäre inzwischen unnötig, für den IE6 zu optimieren. Bei einer privaten Seite oder einer kostenlosen Community mag das stimmen.
In unserem Fall haben wir laut Statistik etwa 4,6 % Besucher mit IE6. Klingt wenig. In absoluten Zahlen sind das aber etwa 4000 Besucher pro Monat. Und auf 4000 potentielle Kunden kann man eigentlich nicht verzichten.
Insofern: Sehr guter Artikel, kannte bisher nur reine JS-Lösungen!
Aber: Statt transparente PNGs im IE6 darzustellen, etc. pp. kann man natürlich auch einfach das Layout für den IE6 so stark vereinfachen, dass eben keine aufwändigen grafischen Sachen mehr da sind. In unseren Fall haben wir jetzt schicke Menüs mit “runden Ecken”, Schattierungen, etc. einfach durch eine grauen viereckigen Kasten ersetzt. Kein Hintergrundbild, kein nichts, aber gut lesbar. Hauptsache die IE6-User können die Seite vernünftig nutzen – von schick hat keiner was gesagt
im CSS:
img, div { behavior: url(iepngfix.htc);}
Dann die iepngfix.htc in den Ordner legen (findet ihr im Netz)
eine .htaccess anlegen mit AddType text/x-component .htc
fertig. – ohne Layer, ohne Javascript und auch mit Steinzeitbrowsern.
@ Marc Hummer,
schon mal in die iepngfix.htc geschaut:
Da drin steht ein javascript snippet, das den Filter AlphaImageLoader zuweist!
Bei mir verschwindet dann die background-repeat Eigenschaft in den IEs, wenn ich das iepngfix.htc anwende!
hat alles wunderbar funktioniert, bis ich das in einer alten IE Version ausgetestet habe. Ich dachte alles wäre gut, aber dann habe ich das dort geöffnet und nichts funktioniert da. Gibt es für das Problem schon eine Lösung?
[...] VisualHype Blog habe ich eine gute und einfache Lösung gefunden. Für die Profis hier nur schnell der Code, alle [...]