|
Viele Leute sagen, dass IE6 PNG-Transparenz nicht unterstützt. Tatsächlich unterstützt IE 100 % transparentes PNG. Der verrückte IE6 unterstützt nur die Alpha-Transparenz von PNG nicht.
Dieser BUG hat uns eine Menge Ärger bereitet.
Es gibt jedoch immer noch viele Probleme, beispielsweise halbtransparente PNG-Hintergrundbilder.
Gulu77 hat 4 Methoden für PNG-Alpha-Transparenz in IE6 zusammengestellt:
Testbeispiel: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
Hier verwenden wir IE6 zum Testen und die eingefügten Bilder und Hintergrundbilder sind nicht transparent.
Die erste Methode: AlphaImageLoader-Filter <br />Microsoft bietet eine Lösung: http://support.microsoft.com/kb/294714/zh-cn
Einführung in die Verwendung: Filter in jeden Etikettenstil einfügen: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')
Notiz:
AlphaImageLoader hat Schwierigkeiten, das Bild <img src=”.png”/> transparent einzufügen
Die Methode AlphaImageLoader wird auf dem Hintergrundbild angewendet, um den Hintergrundbildeffekt zu erzielen
AlphaImageLoader wird von IE8 nicht unterstützt. Da IE7 AlphaImageLoader unterstützt, wird empfohlen, zur Vermeidung von Konflikten CSS-Hacks zu verwenden, um sie zu unterscheiden. Verwenden Sie nur das Testbeispiel für IE6: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
Zweite Methode: PNG-Transparenz im IE
Einführung: Relativ einfach, mithilfe eines JavaScripts, das einen Filter enthält, um die Alpha-Transparenz eines Bilds oder eines PNG-Hintergrunds zu simulieren. Hinweise:
Als Ersatz für das PNG-Bild dient das transparente Bild spacer.gif im Stammverzeichnis. Der Pfad des in JavaScript geschriebenen spacer.gif kann bei Bedarf angepasst werden.
Die PNGTransparncyinIE-Methode kann den Effekt eines Hintergrundbilds nur in Hintergrundanwendungen erzielen. Der wiederholte Koordinatenaufruf im Hintergrund kann derzeit nicht realisiert werden. Offizieller Originaltext: http://codingforums.com/archive/index.php?t-80555.html
Testbeispiel: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
Die dritte Methode: IE PNG Fix v1.0 / 2.0 Alpha 3
Dies ist die neueste Version und wir werden uns heute auf die Einführung einer Methode konzentrieren.
Einführung in die Verwendung: Das Seiten-Tag verwendet behavior:url("iepngfix.htc");, um die externe Datei iepngfix.htc aufzurufen, die JS und CSS enthält, um die Alpha-Transparenz von PNG zu korrigieren.
Testbeispiel 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Testbeispiel 2 (offiziell, E-Text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* Unterstützt das Element <img src="">.
* Unterstützt PNG-Hintergrundbilder (im Gegensatz zu vielen anderen Skripten!)
* Unterstützung für CSS1-Hintergrundwiederholung und -Position (über optionales Plugin)
* Hintergrundbilder können integriert oder in einem externen Stylesheet definiert werden.
* Behandelt Änderungen an src/Hintergrund automatisch über normales JavaScript (z. B. Mouseover-Rollover) – keine spezielle Codierung erforderlich.
* Die Änderungsunterstützung umfasst CSS-„Klassen“ zum Ändern von Faktoren.
* Verwendet die automatische Anpassung von <a href=”">Elementen der Kontextfaktoren von Papua-Neuguinea.
* Kleines Skript (schnelles Herunterladen).
* Lizenziert unter einer Free Software License.
Verwendung: Befolgen Sie diese einfachen Schritte, um dies zu Ihrer Seite hinzuzufügen:
1. Kopieren Sie iepngfix.htc und blank.gif und fügen Sie sie in Ihren Website-Ordner ein.
2. Kopieren Sie das CSS oder HTML und fügen Sie es in Ihre Website ein:
<style type="text/css">
img, div { Verhalten: URL (iepngfix.htc) }
</Stil>
Dieser CSS-Selektor muss die Tags/Inhalte enthalten, die PNG unterstützen soll. Geben Sie ihm grundsätzlich eine durch Kommas getrennte Liste der zu verwendenden Tags. Es muss auch den richtigen Pfad enthalten. HTC ist relativ zum Speicherort der HTML-Datei (nicht relativ zur CSS-Datei!). Ihr Beispiel könnte beispielsweise so aussehen:
<style type="text/css">
img, div, a, Eingabe { Verhalten: URL (/css/resources/iepngfix.htc)}
</Stil>
3. Wenn Ihre Website Unterordner verwendet, öffnen Sie diese. Öffnen Sie die HTC-Datei in einem Texteditor wie dem Windows-Editor und ändern Sie die Variable blankImg so, dass sie den richtigen Pfad zu blank.gif enthält, wie folgt:
IEPNGFix.blankImg = "/images/blank.gif";
Auch hier ist der Pfad relativ zur HTML-Datei. Andernfalls wird Ihnen die Grafik „defektes Bild“ angezeigt!
4. Wenn Sie die Hintergrundwiederholung und Hintergrundposition von CSS1 unterstützen möchten, achten Sie darauf, die Extras einzuschließen. js-Datei in Ihrem <head>:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
Andernfalls funktioniert das Hintergrundbild zwar, wird sich jedoch nicht wiederholen oder hervorstechen.
5. Sie können sich zurücklehnen und die Show bequem genießen! Wenn Ihnen gefällt, was Sie sehen, ziehen Sie vielleicht eine Spende in Erwägung, um die Entwicklung dieses Skripts zu unterstützen, denn ich habe Hunderte von Stunden damit verbracht, es zu entwickeln, zu testen und zu unterstützen :). Außerdem würde ich mich sehr über einen Inbound-Link von Ihrer Site zu meiner freuen!
Offizieller Originaltext: http://www.twinhelix.com/css/iepngfix/
Wenn Sie an weiteren Informationen oder einer alternativen Möglichkeit zum Aktivieren des Skripts unter Beibehaltung der CSS-Konformität interessiert sind, sehen Sie sich den Quellcode in der Demodatei an.
———————————————————————————–
So lösen Sie häufige Probleme
1. Ich habe das CSS eingefügt, aber meine PNGs sind nicht transparent!
Denken Sie daran, dass Dateipfade relativ zur HTML-Datei und nicht zur CSS-Datei sind (wie CSS-Hintergrundbilder). Wenn Sie den Pfad testen möchten, fügen Sie darin „alert('Das funktioniert!');“ ein. HTC-Dateien.
2. Es funktioniert offline statt online.
Versuchen Sie zunächst, diese Vorgabe zur Demonstration zu entpacken und unverändert auf den Webserver hochzuladen. Wenn es nicht funktioniert, liegt wahrscheinlich ein MIME-Typ-Problem vor. Sie müssen sicherstellen, dass Ihr Server den richtigen MIME-Typ „text/x-component“ sendet. HTC-Dateien. Versuchen Sie eine dieser beiden einfachen Lösungen:
3. Hochgeladen. htaccess-Datei, die das komprimierte Skript auf den Webserver herunterlädt, wodurch Apache den richtigen MIME-Typ ausgibt.
4. Anstatt „IEPNGFIX.HTC“ von Ihrem CSS aus aufzurufen, laden Sie IEPNGFIX.PHP in denselben Ordner hoch und rufen Sie stattdessen das auf. Dadurch wird auch der richtige MIME-Typ gesendet.
5. Meine PNGs sind transparent, haben aber einen lustigen Rand oder ein rotes „X“-Symbol.
Überprüfen Sie, ob die Variable blankImg richtig festgelegt ist. HTC-Dateien, die wiederum HTML-Dateien entsprechen, enthalten PNGs.
Das Bild verzerrt oder dieses Skript zerstört das Layout meiner Seite.
Wenn Sie es auf ein Bild anwenden, ohne die Abmessungen festzulegen, versucht das Skript, die richtigen Bildabmessungen zu „erraten“ und diese anzuwenden. Wenn es falsch gemacht wird, geben Sie eine explizite Bildbreite an.
Ein PNG-Element, das ein Link oder Formularelement ist, ist nicht anklickbar.
Testbeispiel 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Testbeispiel 2 (offiziell, E-Text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
Vierte Methode: IE PNG Fix v1.0 / 2.0 Alpha 3
Einführung in die Verwendung: ie7/ie8-js ist eine JS-Bibliothek, die den Konflikt zwischen IE- und W3C-Standards löst, sodass sich der IE von Microsoft wie ein webstandardkonformer Browser verhält und mehr W3C-Standards unterstützt.
Offizieller Originaltext: http://code.google.com/p/ie7-js/
Testbeispiel: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html
|
