IE6 Probleme mit transparenten PNGs

StackOverflow https://stackoverflow.com/questions/130161

Frage

Ich habe die Idee gewöhnt, dass, wenn ich will / brauchen alpha-trans PNGs in einer Cross-Browser-Art und Weise zu verwenden, dass ich ein Hintergrundbild auf einem div verwenden und dann, in IE6-only CSS, markieren die Hintergrund als "none" und schließt das richtige "Filter" Argument.

Gibt es eine andere Art und Weise? Ein besserer Weg? Gibt es eine Möglichkeit, dies mit dem img-Tag zu tun und nicht mit Hintergrundbildern?

War es hilfreich?

Lösung

Das Endergebnis ist, wenn Sie Alpha-Transparenz in PNG wollen, und Sie wollen es in IE6 arbeiten, dann müssen Sie die Alphaimageloader-Filter angewandt haben.

Nun gibt es zahlreiche Möglichkeiten, es zu tun: Spezielles Browser-Hacks, Conditional Comments, Javascript / JQuery / JLibraryOfChoice Element Iteration, Server-Side CSS-Serving über Useragent-Schnüffeln ...

Aber all ‚em kommen auf, die der Filter angewendet und der Hintergrund entfernt.

Andere Tipps

Hier ist eine spezifische Lösung Ich mag, mit Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

Es ist einfach zu einer bestehenden Website hinzuzufügen, kümmert sich um alle Arten von Bildern (Form Buttons, Hintergründe, regelmäßige IMG-Tags, etc.), und lässt Ihre CSS schön und sauber.

Das ist höchstwahrscheinlich die „beste“ Art und Weise. Aber denken Sie daran, dass es nicht nur alpha-trans, dass IE6 nicht richtig implementieren, wenn es um PNG-Dateien kommt; der Farbraum ist beschädigt aufgrund IE die Gamma nicht richtig Implementierung und somit PNG-Dateien oft zeigen „dunkler“ als sie sollten.
Eine Alternative „Lösung“, die wir an einem neuen Projekt umgesetzt wurde jedes PNG-Bild mit einem „toGif“ Klasse zu markieren, in der CSS, von denen ein benutzerdefiniertes Verhalten .htc aufgerufen, die die .png Erweiterung ändert sich auf .gif Wenn der Browser erkannt sein wir als Problem markiert haben. Wir sind nur eine GIF-Version jeden PNG neben ihn in dem gleichen Weg, und wenn der Browser sein gefunden wird, die nicht PNGs richtig umgehen kann, es tauscht es mit einer GIF-Version des Bildes aus. Wir opfern daher den Alpha-Blending für garantierten Voll auf Transparenz und Farbgenauigkeit, und nur so tun, wenn wir wissen, dass es wahrscheinlich nicht so aus, geht nach rechts, wie sie ist.
Es kann keine ideale Lösung, aber es ist die Art von Cross-Browser nehme ich an.
Edit: Eigentlich jetzt, dass ich bei dem Projekt in Frage suchen, haben wir ein .htc Verhalten für ein img-Klasse namens „alpha“ als auch die den richtigen Filter auf das Bild wirft automatisch. Sie sind also Erfassung der Browser Javascript anstelle eines IE6-nur reine CSS-Hack verwenden, so könnte es ein bisschen mehr elegant sein ... aber es ist im Grunde das gleiche.
Für eine Einführung, wie DHTML Verhalten zu schreiben, versuchen diesen Link .

Das Bild loader ist die einzige verfügbare Lösung für IE6. Beachten Sie, dass es PNG-Unterstützung sehr rudimentär ist (zusammen mit IE7, auch), und nicht richtig transparentem Hintergrund geschleift verarbeiten kann. Das erfuhr ich auf die harte Weise, wenn eine Website mit einem transparenten Behälter zu entwerfen versuchen. Arbeitete perfekt in Firefox, natürlich.

Das Update sollte für kleine Flächen von Hintergrund und alle transparent Vordergrund Grafiken OK sein, aber auch hier würde ich davon abraten, die Gestaltung einer Website, die große Mengen an Transparenz mit Internet Explorer verwendet.

Am Ende war meine Lösung für IE eine flache Farbe anzuzeigen, behielt aber die Transparenz für die anderen Browser. Haben Sie nicht das Design zu viel am Ende verletzt, zum Glück.

Ein weiterer Weg, um dies ist 2 separate Bilder zu verwenden, z.B. eine GIF und ein transparentes PNG, und richten Sie Ihre CSS entsprechend: 

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 nicht CSS-Selektoren Kind verstehen so die Regel ignorieren, während Browser, die es verstehen geben Ihnen einen schönen transparenten PNG.

Der einzige Nachteil ist, dass Sie zwei getrennte Bilder haben müssen und das Design aussehen könnte nicht genau der gleiche Cross-Browser, aber solange es nicht gebrochen sieht man sollte in Ordnung sein.

Hier gibt es 2 Möglichkeiten, die das Alphaimageloader-Filter nicht verwenden.

Für mich, wenn das Senden nur ein mattes .gif IE6 nicht möglich ist, verwende ich Fireworks eine IE6 freundliche Palette in den .PNG hinzuzufügen.

Die übliche Lösung für img-Elemente ist die src zu ändern, um einen 1x1-Pixel-transparenten GIF-zu-Punkt und dann den gleichen Filter Hack verwenden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top