Abgesehen davon, dass der Internet Explorer 6 schon längst überfällig ist und eigentlich beerdigt gehört – vor allem da es wesentlich bessere und vor allem schnellere Browser gibt – muss man sich als Webdesigner immer wieder damit herumschlagen. Ich bin an dieser Stelle auch ein Vertreter der Meinung, dass wenn ich einem Kunde eine Website liefere, dann muss diese auf allen benutzen Browser gleichermaßen gut funktionieren. Ein Kunde sieht aber meist sehr schnell ein, dass in so einem alten (oder sollte ich sagen veraltet?) Browser JavaScript-Code eher langsam ausgeführt wird, wodurch es dann zu ruckeligen Darstellungen kommen kann. Aber spätestens wenn die Website optisch nicht aussieht, wie in jedem anderen Browser wird er etwas skeptisch.
Ich persönlich verwende sehr gerne PNG-Grafiken, obwohl diese unter Umständen ein paar mehr Bytes einnehmen können, als wenn sie im JPEG-Format gespeichert wären. Dies hat den Grund, dass PNGs verlustfrei komprimiert sind und auch wunderbar Alpha-Transparenz unterstützen. Man hat somit optische sehr viele Möglichkeiten, ABER genau an dieser Stelle kommt der IE6 ins Spiel. Ohne Mehraufwand für diesen Browser gleicht eine Website mit PNGs meist eher einer Katastrophe.
Ich habe schon mehrere Fixes probiert und war echt überrascht, auf welche Ideen die Entwickler gekommen sind. Meist habe ich dann aber alles selbst in die Hand (MSDN: filter) genommen, da alle Entwicklungen ihre Schwächen haben und nicht mit allen Möglichkeiten klar kommen. Vor allem bei der Verwendung von background-image in diversen Elementen stolperten die meisten.
Gestern Nacht habe ich dann aber eine eher unscheinbar Seite entdeckt und diesen Fix (nachdem ich 5 andere zuvor getestet hatte) in eine Seite eingepflegt. Ich war total überrascht, was ich da gesehen habe, als ich im IE6 die Website geöffnet habe. Alles wurde wunderbar und sehr schnell dargestellt, bis auf die beiden, mir bekannten, folgenden Kleinigkeiten. Kurz aber noch zur Technik: wie ich festgestellt habe verwendet der Autor Shapes, um darauf die PNGs zu zeichnen. Diese PNGs werden hinter die Objekte mit den Grafiken gesetzt, sodass erreich wird, sodass im Endeffekt ein paar weitere Ebenen entstehen, die einwandfrei PNG-Grafiken darstellen. So, nun noch zu den Problemen:
- Ich habe ein zentriertes (margin: 0 auto;) Div-Element, welches ein background-image hat. Unter Umständen wird der Hintergrund links am Rand und nicht mittig ausgerichtet. Wird das Fenster in der Größe verändert, so wird beim erneuten Zeichnen alles korrekt dargestellt. Ich denke, dass das ein Problem des IE6 ist, d.h. das vom Script erzeugte Shape eigentlich zentriert sein müsste, aber das vom IE6 nicht korrekt übernommen wird.
Workaround: Ein Div mit dem Hintergrund innerhalb eines zentrierten Divs ohne Hintergrund. Somit wird das Shape in das zentrierte Div gesetzt und braucht somit nicht selbst die zentriert-Eigenschaft, wodurch es immer zentriert gesetzt werden sollte. - Das zweite Problem ist, dass im Moment die Eigenschaft background-image bei Img-Elementen ignoriert wird und die PNGs somit nicht ordentlich angezeigt werden, so wie man es erwarten würde. Ich setze sehr gerne die Technik ein, in ein PNG einige Grafiken zu packen und dann über die background-position-Angabe das passende in einem Img-Element anzuzeigen. Die Src-Angabe im Img-Element zeigt dabei auf ein transparentes Gif, sodass eine gültige Quelle vorliegt. Diese Technik hat den Vorteil, dass Traffic gespart wird, da der Browser weniger Bilder lädt und somit auch weniger Verbindungen zum Server aufbaut.
Workaround: Meine erste Idee wäre es gewesen anstatt dem Gif-Eintrag im Src-Attribute einfach das PNG einzutragen, wobei mir dann leider nicht mehr die Möglichkeit über background-position zur Verfügung steht, d.h. diese Technik wäre komplett hinfällig. Die nächste Idee ware dann anstatt des Img-Elements ein Div-Element zu verwenden, wobei ich diesem “Fix” sehr skeptisch gegenüber stehe, da ich ein Bild doch gerne via einem Img-Element anzeigen will :)
Ich habe den Autor schon über beide Themen benachrichtigt. Er hat sich heute Nacht auch noch prompt gemeldet. Ich hoffe, dass diese beiden Probleme noch behoben werden, denn dann ist das wohl das perfekte Skript für die PNG-Unterstützung im IE6.
Hier nochmals der Link: DD_belatedPNG by Drew Diller
Update
Ich habe mich nun selbst an die Arbeit gemacht und die Library gefixt, da ich unbedingt ein Projekt habe abschließen müssen ;) Beide oben genannten Bugs sind nun nicht mehr vorhanden, wobei es noch ein Problem gibt: ist die CSS-Eigenschaft padding oder margin des Bodys nicht 0, so verschiebt sich das Bild (src-Angabe eines img-Elements) um genau diese Angabe, wenn ein background-Image (CSS) und ein Bild (src-Angabe) im PNG-Format angegeben ist. Ich habe nach einigen Versuchen noch nicht heraus finden können, wo genau das Problem liegt. Daher rate ich an dieser Stelle padding und margin des body-Elements auf 0 zu setzen, dann klappt es auch mit dem Nachbarn :)
Download: DD_belatedPNG (7.2 KiB, 46 hits)