Wie zu lösen / hacken semi-transparente PNG-Fehler in IE8 Fading?

Question

Wie Sie wissen, hat IE6 Fehler, der nicht halbtransparente PNG-Datei ohne Verwendung von Nicht-Standard-Stil wie Filter anzeigen kann. In IE7 wird dieses Problem behoben. Aber es hat noch einige Fehler über PNG-Datei. Es kann nicht richtig halbtransparente PNG-Datei Verblassen anzuzeigen. Sie können es deutlich sehen, wenn Sie Show / Hide-Funktion in jQuery mit semi-transparenter PNG-Datei verwenden. Der Hintergrund des Bildes wird angezeigt mit nicht transparenter schwarzer Farbe.

Haben Sie eine Idee haben, um diese Frage zu lösen, indem jQuery verwenden.

Aktualisieren

Lassen Sie uns meine Prüfung sehen

alt text http: //rabu4g.bay.livefilestore. com / y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-QJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI / bug.png

Wie Sie sehen, IE8 immer falsch angezeigt PNG-24 Bild. Außerdem IE8 immer noch richtig PNG-8-Bild angezeigt wird, wenn I (jQuery.fadeOut Funktion) verblassen sie nur. Aber es falsch PNG-8-Bild angezeigt wird, wenn ich verblassen & Größe ändern (jQuery.hide-Funktion) zur gleichen Zeit.

PS. Sie können meinen Tests Quellcode von hier herunterladen.

Danke,

Answer 1

Ich habe gerade die Art und Weise Problem zufällig zu lösen, wenn ich versuche IE8 Bug im folgende Bild zu fixieren.

Der einfachste Weg, definieren Sie nur Hintergrund des aktuellen Bildes wie der Code unten. Oder Sie können sehen Source Code und Demo auf meinem JsFiddle

#img2
{
    background:#fff;   
}

Wenn Sie jedoch einige komplexe Bild wie mein Fehler haben, sollten Sie versuchen, fast unsichtbare Schicht unter Ihrem Bild und stellen Sie Hintergrundfarbe zu etwas Farbe hinzufügen, die Sie mögen.

Answer 2

Hey, ich weiß nicht, ob Sie immer noch nach einer Antwort suchen. Vor ein paar Tagen hatte ich das gleiche Problem innerhalb eines div mit einem PNG-Bild zu animieren. Ich habe versucht, viele Lösungen und die einzige, die fein gearbeitet ist, den ich codiert selbst.

Das Problem scheint IE fehlt Opazität Unterstützung und richtige PNG Unterstützung zu sein, so bricht es PNG-Anzeige nach einem Opazität Anwendung des Effekts (ich glaube, Animation-Frameworks auf dem propietary verlassen MSIE Filter „Alphaimageloader“ für Opazität Wirkung auf IE). Das Merkwürdige (für mich, die sehr gut verstehen immer noch nicht) ist, dass dieses Problem mit dem gleichen Filter gelöst werden kann, um das Bild vor der Animation zu laden.

Ich schrieb ein einfaches Javascript, die die Filter zu jedem Bild mit PNG- Erweiterung gilt. Meine Animationen gut laufen auf IE mit.

ich kopieren Sie den Code unten. I'ts Rahmen unabhängig (es ist reine JavaScript), aber man muss es DOM bereit Ereignis in Ihrem Rahmen setzen (oder verwenden Sie domready.js, wie ich es tat).

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Bitte lassen Sie mich wissen, wenn Sie gut funktioniert und wenn Animation runned glatt. Mit freundlichen Grüßen!

Answer 3

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

in CSS

.iefix
{
 /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

einfach, schnell und schön:)

Answer 4

Die Ursache des Problems scheint Micrsoft IE schlechte Unterstützung für die PNG Alpha-Transparenz (in jeder Version von IE) zu sein. IE6 ist der schlimmste Täter bei weitem, alpha-transparente Pixel als blaßblauen Farbwiedergabe. IE7 und IE8 PNG Alpha-Transparenz umgehen, aber die Opazität eines alpha-transparentes Pixel zu ändern in der PNG nicht verarbeiten können -. Sie statt transparent schwarz dargestellt,

Meine eigenen Korrekturen für diesen abhängig von der Situation. Hier sind einige Ansätze:

1. Sie einfach eine GIF verwenden. GIF-Dateien werden nicht so glatt (aufgrund der begrenzten Farbtiefe) erscheinen, aber die Pixel vollständig transparent.
2. Verwenden Sie den IE PNG Fix finden Sie hier: http://git.twinhelix.com/cgit/iepngfix / -. eröffnen index.html und die Kommentare lesen
3. Animieren von Bewegung, aber animiert nicht Opazität von PNG-Bildern.
4. Bedingte einen oder alle der oben entweder mit JavaScript-Tests, bedingte Kommentare, oder die MSIE-only „Verhalten“ Erweiterung CSS. Hier ist, wie irgendetwas davon funktionieren könnte:

Bedingte Kommentare:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

In der CSS:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

Via JavaScript-Erkennung:

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

Das iepngfix.htc Verhalten funktioniert, indem die PNG mit einem leeren Bild ersetzt (blank.gif) und dann Routinen mit Microsofts DXImageTransform das PNG als Filter auf dem leeren Bild zu laden. Es gibt noch andere PNG behebt gibt, die Arbeit durch die Dinge in divs oder Spannweiten Einwickeln, aber die werden oft Ihr Layout brechen, so vermeide ich sie.

Hope, das hilft.

Answer 5

Ich habe für IE 6/7/8 ein Update zu diesem Thema geführt werden.

sieht ungefähr wie folgt aus:

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut('slow');

Hinweis

, dass das "Filter" Attribut implizit Ziele nur IE.

Answer 6

habe ich diese Funktion Bilder in Galerie Karussell vorab zu laden. Es basiert auf Alejandro García Iglesias Antwort oben. Es wurde von der "schwarzen Halo" los in IE 6 und 8.

function preloadImages(id) {
    var c = new Array();
    $(id+' img').each( function(j) {
        c[j] = new Image();
        c[j].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

Aufruf wie folgt aus:

preloadImages('#Stage');

Answer 7

Warum versuchen Sie nicht mit PNG8. PNG8 ist weithin als voll transparent bekannt als GIF-Dateiformat ist. Allerdings exportiert Fireworks es kann sein semi-transparent wie PNG24 . Der Vorteil besteht darin, dass IE6 die PNG8 mit halbtransparenten Pixeln zeigt, wie es ein GIF ist - oder mit voller Transparenz, aber IE7 und 8 Anzeige es richtig als PNG24 und wenn Sie verblassen es mit jQuery oder was auch immer js Bibliothek wird es keine Anzeige des Hintergrund mit grau, weil es die berühmten -filter Eigenschaft nicht verwendet werden.

Answer 8

ich verwende eine modifizierte PNG Fix für IE6 es einfach toll funktioniert:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

vergessen Sie nicht, x.gif zu. (Ein transparentes 1x1 gif)

Answer 9

  

Der Vorteil ist, dass IE6 die PNG8 mit halbtransparenten Pixeln zeigt, wie es ein GIF ist - oder mit voller Transparenz, aber IE7 und 8 Anzeige es richtig als PNG24 und wenn Sie es verblassen mit jQuery oder was auch immer js Bibliothek wird es nicht zeigt den Hintergrund mit grauem, weil sie nicht die berühmten -filter Eigenschaft.

Es gibt nur einen Weg, in IE eine Opazität verwandeln zu tun. Filter: alpha (Opazität :). Wie sonst sollte jQuery tun?

Answer 10

Nichts wirklich für mich gearbeitet, so weit, dass ich durch CSS beide Einstellungen Opazität gelesen habe kombiniert und transparenten PNGs. Diese Lösung endete für mich arbeiten an einer belebten Undurchsichtigkeit Seite auf IE8. Andere Lösungen, die auf dieser Seite aufgelistet hat nicht funktioniert.

#img {
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
    zoom:1;
    width:600px;
    height:400px;
}

<div id='img'></div>

Beachten Sie die Filter ein Alpha-Filter hat zuerst, dann die Alphaimageloader.

Answer 11

Dies kann auf ähnliche getan werden, was Stu hier getan hat: http: // www .cssplay.co.uk / menus / flyout_horizontal.html

Answer 12

mit Im das gleiche lästige Problem mit IE8 und IE7 .. jemand getestet, ob Cmc Lösungen funktioniert der Trick?

Meine url ist http://www.onlinebrand.dk (Top-Menü eingeblendet, wie Google: ) Aber IE egal.)

EDIT: Nur es selbst getestet, und auch wenn ich gesetzt Breite und Höhe, auch die Wiederholung img. Es funktioniert nicht,

Ich habe gerade eine andere Arbeit um, wo FadeIn einen Wrapper anstelle des div mit dem .png bg Bild. Und es funktionierte Art, Im jetzt som Art von Transparenz in IE bekommen, sondern auch, einige padding / margin..Totally wierd ..

Bill Gates, Whats up mit diesem? Warum können wir nicht miteinander auskommen?

Answer 13

1. Definieren Sie einen festen Hintergrundfarbe zu Ihrem Bild:

   .Behälter img {      background-color: white; }

2. Definieren Sie das Hintergrund-Bild CSS-Eigenschaft des Bildes zu seiner src Attribut:

   $ ( 'img.png-trans'). Each (function () {      $ (This) css ( 'background-image', $ (this) .attr ( 'src')); });

Ihr Vorteil: Sie müssen nicht Ihren Markup ändern

Nachteil: manchmal eine solide Hintergrundfarbe der Anwendung ist keine akzeptable Lösung. Es ist normal für mich.

Answer 14

Verwenden Sie Einheit PNG für halbtransparente PNG-24-Fix .