Comment faire pour résoudre les hack décoloration semi-transparent PNG bug dans IE8?

Question

Comme vous le savez, IE6 a un bug qui ne peuvent pas afficher semi-transparent PNG fichier sans l'aide non-standard de style comme filtre. Dans IE7, ce problème est résolu. Mais Il y a encore quelques bug à propos de fichier PNG. Il ne peut pas afficher correctement la décoloration semi-transparent fichier PNG. Vous pouvez clairement voir lorsque vous utilisez afficher/masquer la fonction jQuery avec semi-transparent fichier PNG. L'arrière-plan de l'image est affichée avec les non-transparent de couleur noire.

Avez-vous une idée pour résoudre cette question à l'aide de jQuery.

Mise à jour

Voyons voir mes tests

Comme vous le voyez, IE8 toujours affiche de façon incorrecte, le format PNG-24 image. En outre, IE8 encore afficher correctement le format PNG-8 image quand j'ai fondu(jQuery.fadeOut fonction) uniquement. Mais Il affiche de manière incorrecte, le format PNG-8 image quand j'ai fondu & resize(jQuery.la fonction cache) en même temps.

PS. Vous pouvez télécharger mes tests de code source à partir d' ici.

Merci,

Answer 1

Hey, je ne sais pas si vous êtes toujours à la recherche d'une réponse. Il y A quelques jours j'ai eu le même problème l'animation d'un div avec une image PNG à l'intérieur. J'ai essayé beaucoup de solutions et le seul qui a bien fonctionné est celle que j'ai codé moi-même.

Le problème semble être IE manque d'opacité de soutien et de bonne PNG support, donc il se casse PNG affichage après l'application d'un effet opacité (je crois que l'animation des cadres de compter sur la propietary MSIE filtre "AlphaImageLoader" pour l'opacité de l'effet sur IE). La chose curieuse (pour moi qui ne comprends toujours pas très bien), c'est que ce problème peut être résolu en utilisant le même filtre pour charger l'image avant de l'animation.

J'ai écrit un simple javascript qui s'applique le filtre à chaque image avec .PNG extension. Mes animations fonctionner correctement sur IE avec elle.

Je copie le code ci-dessous. J'ai ts cadre indépendant (c'est du pur JavaScript), mais vous devez le mettre à l'intérieur de votre cadre DOM prêt de l'événement (ou de l'utilisation domready.js comme je l'ai fait).

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

S'il vous plaît laissez-moi savoir si fonctionné pour vous et si l'animation fini lisse. Salutations!

Answer 2

HTML

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

dans le CSS

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

facile, rapide et sympa :)

Answer 3

La cause racine du problème semble être Micrsoft IE soutien des pauvres pour le PNG alpha-transparence (dans n'importe quelle version d'IE). IE6 est le pire des criminels, et de loin, le rendu de l'alpha-pixels transparents comme un bleu pâle de la couleur. IE7 et IE8 poignée PNG alpha de transparence, mais ne peut pas gérer changer l'opacité d'un alpha-pixel transparent dans le format PNG – ils le rendu en noir au lieu de transparent.

Mon propre pour corriger cela, il dépend de la situation. Voici quelques approches:

1. Il suffit d'utiliser un GIF. GIFs ne s'affichent pas comme lisse (en raison d'une faible profondeur de couleur), mais les pixels sont totalement transparents.
2. Utiliser l'IE PNG fix disponible ici: http://git.twinhelix.com/cgit/iepngfix/ -- ouvrir index.html et de lire les commentaires.
3. Animation de la trajectoire, mais ne pas les animer l'opacité des images PNG.
4. Conditionnellement faire tout ou partie de la ci-dessus en utilisant soit JavaScript, des tests, des commentaires conditionnels, ou la MSIE seul "problème" extension de CSS. Voici comment tout cela peut fonctionner:

Les commentaires conditionnels:

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

Dans le css:

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

Via JavaScript de détection:

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

Le iepngfix.htc comportement des œuvres par le remplacement de la PNG avec une image vide (blank.gif), puis à l'aide de Microsoft DXImageTransform routines pour charger le PNG comme un filtre sur l'image vide. Il y a d'autres PNG correctifs qui travail en enveloppant les choses dans les divs ou s'étend, mais ceux-ci vont souvent de briser votre mise en page, j'ai donc les éviter.

Espérons que cette aide.

Answer 4

J'ai réussi un correctif pour ce problème pour IE 6/7/8.

Ressemble plus ou moins à ceci:

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

Notez que le "filtre" de l'attribut implicitement objectifs c'est à dire uniquement.

Answer 5

J'ai utilisé cette fonction pour précharger les images de la galerie du carrousel. Il est basé sur Alejandro García Iglesias la réponse ci-dessus. Il s'est débarrassé de la "black halo" dans IE 6 & 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 +"')"; 
        }
    });

}

Appel comme ceci:

preloadImages('#Stage');