Transparent PNG Einsteigen IE 6 in img-Tag zu arbeiten,

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe einen mit transparentem Hintergrund png, die nicht in IE funktioniert 6. Ich habe um das Problem bekommen, indem sie die wenige img-Tags ersetzen, das Bild mit einem DIV verwenden und in CSS Ich benutze: 

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

das Problem, das ich mit dieser ist, dass ich dann alt und Titel Attribute verlieren, die nicht die Seite sehr zugänglich machen. Wenn ich das über CSS mit einem img-Tag sehe ich das richtige Bild, aber es hat die großen ‚X‘ darüber, dass der IE zeigt, wenn es kein Bild angezeigt werden kann.

Alle Vorschläge, wie kann ich IE erhalten, indem zeigt die Transparenz korrekt in einem IMG-Tag zu verhalten?

War es hilfreich?

Lösung

Eine Möglichkeit, können Sie weiterhin die DIV-Tags verwenden, aber immer noch erreichbar sein ist einen zweiten SPAN-Tag innerhalb des DIV-Elements zu platzieren und den Wert für die ALT im Innern, dass setzen, Stil es dann nicht von der Seite zu sein .. . zum Beispiel ... 

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

Dann wird der HTML würde wie folgt aussehen ... 

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

Der Titel-Tag funktioniert immer noch auf dem DIV, so dass Sie auf diesem Teil sollten in Ordnung sein.

Ich glaube nicht, dass Sie einfach den Text verbergen kann (wie in display: none;), weil ich Bildschirm Leser denken, wird diese Regel respektieren (wie in es nicht gelesen)

Andere Tipps

könnten Sie Javascript verwenden Transparenz in IE6 zu ermöglichen. gibt es viele Beispiele, die Sie finden können. Hier ist ein Link zu einem i verwendet haben.

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

eine weitere Option ist htc für IE6 verwenden - siehe hier Lösung:

http://www.twinhelix.com/css/iepngfix/

erfordert nur eine zusätzliche Zeile in der CSS-Datei hinzugefügt - sorry noch Javascript erforderlich machen -. Nicht sicher

habe ich ein kleines Javascript-Tool für dieses Problem vor ein paar Monaten zu lösen. Es ist benannt Einheit PNG FIX und es ist sehr einfach zu bedienen.

Während jemand hier eine JS-Implementierung für diese gab, wird diese Lösung auch für FF und andere Browser ausgeführt werden. Es gibt bessere Ideen, beispielsweise mit MS-Technologie:)

Einer von ihnen nutzt etwas namens HTC (Hypertext-Komponente, wenn ich zu verkennen bin nicht). Es ist so etwas wie ... ein CSS für das Verhalten. Es ist wirklich eine XML-Datei, die Sie einige Funktionen auf einen CSS-Selektor befestigen lässt. Wieder eine MS nur Technologie.

Kurz gesagt, besuchen Sie diese Seite: http://www.twinhelix.com/css/iepngfix/

Ich verwende dies einen Drupal-Modul withing und ich bin sehr glücklich. Wenn Sie sich fragen, das ist das Modul: http://drupal.org/project/pngbehave

Hinweis: Dies funktioniert nicht unter IE Tester: http://www.my -debugbar.com/wiki/IETester/HomePage Ich bin ein Windows 2000 mit IE6 (unter vmware läuft, wenn Sie wissen müssen) IE6 Websites zu testen.

IE6 unterstützt PNG-8 Transparenz, aber nicht PNG-24. Einer meiner Lieblings-Tools zu "reparieren" IE6 ist IE8.js .

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