Blogix

Transparente PNG-Dateien werden im Internet Explorer 6 bzw. 5.5 standardmäßig nicht unterstützt. Anstelle der Transparenz wird eine graue Fläche angezeigt. Trotzdem möchte man sehr oft transparente PNG-Bilder benutzen, denn transparente GIFs erlauben keine Halbtransparenz (z.B. bei Schlagschatten) bzw. Ränder von Rundungen werden pixelig dargestellt. Damit transparente PNGs auch im Internet Explorer 6 bzw. 5.5. korrekt dargestellt werden, kann man einen PNGfix (z.B. von http://homepage.ntlworld.com/bobosola/) als JavaScript in die HTML-Seite integrieren:

<script defer type="text/javascript" src="js/pngfix.js"></script>

Das bringt jedoch den großen Nachteil, dass Hyperlinks auf bzw. um PNG-Bilder nicht mehr klickbar sind. Abhilfe schafft jedoch folgender CSS-Code in der Datei lt-ie7.css, der den Hyperlink wieder in der Vordergrund bringt (kann mit zusätzlichen Tags erweitert werden):

a {
  position: relative;
  z-index: 9999;
}

Dieser Code wird wie folgt in die HTML-Seite integriert:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/lt-ie7.css" />
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

Hintergrundgrafiken im CSS können für Internet Explorer 6 bzw. 5.5. (in der Datei lt-ie7.css) ohnehin recht einfach transparent gemacht werden, ein Fix ist somit hierfür nicht notwendig:

div#content {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/content-bg.png', sizingMethod='crop');
}

Zuerst wird das bereits für andere Browser vorhandene Hintergrundbild entfernt und dieses mit “filter” für den IE kompatibel wieder eingefügt.

Die sich noch in der Entwicklung befindlichen Browser Internet Explorer 8 und Firefox 3 bestehen den Acid2 Browser-Test. Bei diesem Test geht es darum CSS 2.1 korrekt zu interpretieren und ein Smiley samt Text, wie im nachstehenden Bild gezeigt, korrekt darzustellen. Weiterlesen »