Come risolvere / hackerare bug PNG semitrasparente in IE8 in dissolvenza?

Question

Come sai, IE6 ha un bug che non può visualizzare file PNG semitrasparenti senza usare uno stile non standard come il filtro. In IE7, questo problema è stato risolto. Ma ha ancora qualche bug sul file PNG. Impossibile visualizzare correttamente il file PNG semitrasparente in dissolvenza. Puoi vederlo chiaramente quando usi la funzione show / hide in jQuery con file PNG semitrasparente. Lo sfondo dell'immagine viene visualizzato con un colore nero non trasparente.

Hai qualche idea per risolvere questa domanda utilizzando jQuery.

Aggiorna

Vediamo i miei test

Grazie,

Answer 1

Ho appena trovato il modo di risolvere il problema per caso quando provo a correggere il bug IE8 nella seguente immagine.

Il modo più semplice, basta definire lo sfondo dell'immagine corrente come il codice qui sotto. Oppure puoi vedere codice sorgente completo e demo sul mio JsFiddle

#img2
{
    background:#fff;   
}

Tuttavia, se hai un'immagine complessa come il mio bug, dovresti provare ad aggiungere un livello quasi invisibile sotto l'immagine e impostare il colore di sfondo su un colore che ti piace.

Answer 2

Ehi, non so se stai ancora cercando una risposta. Un paio di giorni fa ho avuto lo stesso problema nell'animazione di un div con un'immagine PNG all'interno. Ho provato molte soluzioni e l'unica che ha funzionato bene è una che ho codificato io.

Il problema sembra essere IE privo di supporto di opacità e supporto PNG adeguato, quindi interrompe la visualizzazione PNG dopo aver applicato un effetto di opacità (credo che i framework di animazione si basino sul filtro MSIE propietario " AlphaImageLoader " per l'effetto di opacità su IE). La cosa curiosa (per me che ancora non capisco molto bene) è che questo problema può essere risolto usando lo stesso filtro per caricare l'immagine prima dell'animazione.

Ho scritto un semplice javascript che applica il filtro a ogni immagine con estensione .PNG. Le mie animazioni funzionano bene su IE con esso.

Copio il codice qui sotto. È indipendente dal framework (è puro JavaScript), ma devi inserirlo all'interno dell'evento DOM pronto per il tuo framework (o utilizzare domready.js, come ho fatto io).

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 + "')";
        }
    }
}

Per favore fatemi sapere se ha funzionato bene per voi e se l'animazione ha funzionato senza intoppi. Cordiali saluti!

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();
}

facile, veloce e carino :)

Answer 4

La causa principale del problema sembra essere lo scarso supporto di Micrsoft IE per la trasparenza alfa PNG (in qualsiasi versione di IE). IE6 è di gran lunga il peggiore offensore, rendendo i pixel alfa-trasparenti di un colore blu pallido. IE7 e IE8 gestiscono la trasparenza alfa PNG, ma non riescono a gestire la modifica dell'opacità di un pixel alfa-trasparente nel PNG: vengono visualizzati in nero anziché trasparente.

Le mie correzioni dipendono dalla situazione. Ecco alcuni approcci:

1. Usa solo una GIF. Le GIF non appariranno lisce (a causa della profondità del colore limitata), ma i pixel sono completamente trasparenti.
2. Utilizza la correzione PNG di IE disponibile qui: http://git.twinhelix.com/cgit/iepngfix / - apri index.html e leggi i commenti.
3. Animare il movimento, ma non animare l'opacità delle immagini PNG.
4. Esegui in modo condizionale uno o tutti i suddetti elementi utilizzando test JavaScript, commenti condizionali o il solo comportamento "MSIE" estensione a CSS. Ecco come potrebbe funzionare qualcosa del genere:

Commenti condizionali:

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

Nel CSS:

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

Tramite rilevamento JavaScript:

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

Il comportamento iepngfix.htc funziona sostituendo il PNG con un'immagine vuota (blank.gif) e quindi utilizzando le routine DXImageTransform di Microsoft per caricare il PNG come filtro sull'immagine vuota. Esistono altre correzioni PNG che funzionano avvolgendo le cose in div o span, ma quelle spesso interromperanno il layout, quindi le evito.

Spero che questo aiuti.

Answer 5

Ho gestito una correzione a questo problema per IE 6/7/8.

Sembra più o meno così:

<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');

Nota che il " filtro " l'attributo coinvolge implicitamente solo IE.

Answer 6

Ho usato questa funzione per precaricare le immagini nel carosello della galleria. Si basa su Alejandro Garc & # 237; una risposta di Iglesias sopra. Si è sbarazzato dell '"alone nero" in IE 6 e amp; 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 +"')"; 
        }
    });

}

Chiama in questo modo:

preloadImages('#Stage');

Answer 7

Perché non provi con PNG8. PNG8 è ampiamente noto come completamente trasparente come è il formato di file GIF. Tuttavia, esportato con Fireworks, può essere semitrasparente come PNG24 . Il vantaggio è che IE6 visualizza il PNG8 con pixel semitrasparenti in quanto è un GIF - o con piena trasparenza, ma IE7 e 8 lo visualizzano correttamente come PNG24 e se lo svanisci con jQuery o qualunque libreria js non visualizzerà lo sfondo con gray, perché non utilizza la famosa proprietà -filter.

Answer 8

Uso una correzione PNG modificata per IE6 che funziona alla grande:

(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);

non dimenticare di caricare x.gif. (una gif 1x1 trasparente)

Answer 9

  

Il vantaggio è che IE6 visualizza il PNG8 con pixel semitrasparenti in quanto è un GIF - o con piena trasparenza, ma IE7 e 8 lo visualizzano correttamente come PNG24 e se lo svanisci con jQuery o qualunque libreria js non lo farà visualizza lo sfondo in grigio, perché non utilizza la famosa proprietà -filter.

Esiste un solo modo in IE per eseguire una trasformazione di opacità. filtro: alfa (opacità :). In quale altro modo jQuery dovrebbe farlo?

Answer 10

Niente ha funzionato davvero per me finora che ho letto combinando le impostazioni di opacità tramite CSS e PNG trasparenti. Questa soluzione ha funzionato per me su una pagina di opacità animata su IE8. Altre soluzioni elencate in questa pagina non hanno funzionato.

#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>

Nota che il filtro ha prima un filtro Alpha, quindi AlphaImageLoader.

Answer 11

Questo può essere fatto in modo simile a quello che Stu ha fatto qui: http: // www .cssplay.co.uk / menù / flyout_horizontal.html

Answer 12

Sto avendo lo stesso fastidioso problema con IE8 e IE7 .. qualcuno ha testato se le soluzioni Cmc fanno il trucco?

Il mio URL è http://www.onlinebrand.dk (il menu principale si dissolve, come Google: ) Ma a IE non importa.)

EDIT: L'ho appena provato da solo, e anche se ho impostato larghezza e altezza di, bene l'img ripetuto. Non funziona

Ho appena trovato un altro lavoro in giro, in cui Fadein è un wrapper invece del div con l'immagine .png bg. E ha funzionato, ora sto ottenendo una sorta di trasparenza in IE, ma anche un po 'di riempimento / margine ... Totalmente strano ..

Bill Gates, che succede? Perché non possiamo andare d'accordo?

Answer 13

1. Definisci un colore di sfondo uniforme per la tua immagine:

   .container img {      colore di sfondo: bianco; }

2. Definisci la immagine di sfondo css della tua immagine sull'attributo src :

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

Vantaggio: non è necessario modificare il markup

Svantaggio: a volte l'applicazione di un colore di sfondo uniforme non è una soluzione accettabile. Normalmente è per me.

Answer 14

Usa Correzione PNG unità per png-24 semitrasparente.