Transparente PNGs im Internet Explorer
Wenn Sie schon einmal versucht haben transparente PNGs im Internet Explorer darzustellen, dann haben Sie sicherlich gemerkt, dass dieser schönen transparenten Farbverläufen und Schattierungen in ein hässliches Grau verwandelt. Das liegt daran, dass die Transparenz von PNGs noch nicht richtig im Internet Explorer implementiert ist. Doch es gibt eine Notlösung – einen von Microsoft bereitgestellten Filter, der wie im Folgenden angewandt wird:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Transparente PNGs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#image {
width:211px;
height:55px;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src='logo.png', sizingMethod='scale');
}
</style>
</head>
<body>
<div id="image"></div>
</body>
</html>
Die Grafik muss also in einen Container gepackt werden und mit einem von Microsoft bereitgestellten Filter gefüllt werden. Da man, falls Sie das schon versucht haben, nicht gleichzeitig ein background-image setzen kann, muss man für den IE ein Conditional Comment einfügen oder gleich von vorn herein per PHP-Code abfragen welcher Browser es ist. Ich bevorzuge den Conditional Comment als Browserweiche:
<!--[if lt IE 6]> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Jetzt können Sie in die style.css für den Container in der style.css die Grafik per background-image:url(…) und in der ie.css per background-image:none; filter:… einbinden und es wird in beiden Browsern laufen.
Der Firefox-Browser hat solche Probleme nicht.
Nachtrag:
Mit diversen Tools kann man seine PNGs auch tweaken, sodass diese ohne Javascripts/CSS-Hacks einwandfrei dargestellt werden können. Hier gibts weitere Informationen zum PNG-Tweaking.
Schlagwörter: internet explorer
