Fonctions liées au PNG sous les compétences IE browser_javascript

À l'heure actuelle, Internet a des exigences de plus en plus élevées en matière d'effets de page Web, et il est inévitable d'utiliser des images PNG. PNG est divisé en plusieurs formats, PNG8, PNG24, PNG32, parmi lesquels le plus couramment utilisé, qui également. a un effet d'affichage et une taille modérés, est PNG24. Il prend en charge la translucidité, la transparence et les couleurs très riches. Cependant, parce que la plupart de nos Chinois utilisent la série IE ou des navigateurs avec IE comme série principale, et parce que WINDOWS XP a une taille relativement grande. part de marché sur le marché intérieur, et de nombreuses personnes utilisent encore XP IE6 IE7 IE8 et d'autres navigateurs, et ces navigateurs ont plus ou moins de lacunes dans leur prise en charge de PNG. IE6 ne prend pas du tout en charge le PNG, et IE7, IE8 ne prend pas complètement en charge le PNG. . Lors de la modification de la transparence d'une image sous IE7 IE8, le format PNG ne sera pas pris en charge. Il y aura une bordure noire dans la zone transparente, toute la zone translucide sera noire. Après quelques recherches, j'ai découvert qu'en utilisant PNG comme arrière-plan, utilisez Microsoft Le filtre unique charge les images, ce qui peut résoudre le problème de IE6 ne prenant pas en charge PNG, et peut également résoudre le problème des bords noirs lors de l'utilisation de l'effet de transparence d'animation JQUERY sous. IE7 et IE8 Il existe un code avec une image réelle, comme suit :

<script>
function correctPNG() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters)) {
    var lee_i = 0;
    var docimgs=document.images;
    for (var j = 0; j < docimgs.length; j++) {
      var img = docimgs[j]
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
        lee_i++;
        var SpanID = img.id || 'ra_png_' + lee_i.toString();
        var imgData = new Image();
        imgData.proData = SpanID;
        imgData.onload = function () {
          $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
        }
        imgData.src = img.src;
        var imgID = "id='" + SpanID + "' ";
        var imgClass = (img.className) &#63; "class='" + img.className + "' " : ""
        var imgTitle = (img.title) &#63; "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
        var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
        img.outerHTML = strNewHTML;
        j = j - 1;
      }
    }
  }
}
//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
  window.attachEvent("onload", correctPNG);
}
</script>

Référez-vous à la bibliothèque de classes jquery1.8 avant la balise de fin de /body de la page, puis ajoutez le code ci-dessus. Il n'y a aucun problème pour afficher PNG24 dans IE6 7 8. Si vous avez besoin d'animer une animation ou d'obtenir des images, vous constaterez que dans IE 6 7 8 fois, l'image PNG est introuvable ou il n'y a pas de réponse lors du changement de position et de transparence. La raison en est que correctPNG remplace les balises IMG de tous les PNG de la page par des balises SPAN, et utilise ensuite filter: progid sur les balises SPAN. :DXImageTransform.Microsoft.AlphaImageLoader charge l'image PNG, l'approche recommandée consiste donc à inclure l'image dans un DIV. Une seule balise IMG est autorisée dans ce DIV, puis à effectuer la position ou la transparence. opérations associées sur la DIV, par exemple :

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

Une autre situation est qu'en plus de la transparence et du déplacement de cette image, je dois également modifier sa largeur et sa hauteur. Dans ce cas, je recommande la méthode suivante :

.

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

BUG : Si vous modifiez dynamiquement la transparence d'une image png sous IE7 et IE8, par exemple, si vous appliquez un fadeIn et ajustez la transparence de l'image à 25%, un bug très étrange apparaîtra Les informations de transparence de. le png ne sera pas affiché. Cela s'est transformé en une couleur noire très moche !

Solution au bug où l'arrière-plan des images png devient noir sous IE7 et IE8 :

1. Ne changez pas directement la transparence de l'image, mais mettez un conteneur pour l'image pour modifier la transparence du conteneur
Par exemple, le code d'origine est : 0131c46f0d9245bb311d3114692a5fae

Modifier en :21c86848ea3e281d6919291ffc9afa87881c3d16ac7d3a757d0ee88c64187efa16b28748ea4df4d9c2150843fecfba68

2. Ajoutez une couleur de fond à ce conteneur

C'est très important. La clé pour résoudre les bugs réside dans cette étape, comme :

.share-list-icon-shadow{ 
  width:60px;height:21px; 
  position:absolute;bottom:8px;left:0px;z-index: 1; 
  margin: 0 auto; 
  display:block; 
  background:#FAFDEF; 
} 

Dans des circonstances normales, le bug est résolu à ce stade. Si vous rencontrez toujours des problèmes, veuillez consulter ci-dessous :

3. Ajouter un zoom au conteneur : 1

zoom : 1 Quel rôle joue-t-il ? Pourquoi IE a-t-il ce bug ?
Ce sont deux questions, mais en réalité une seule réponse. IE modifie la transparence non pas via les attributs CSS, mais via des filtres. Par conséquent, si vous voulez comprendre ce bug, vous devez trouver la raison à partir des filtres. Lorsque le filtre agit sur un objet, l'objet doit être tangible, c'est-à-dire qu'il doit s'agir d'une mise en page. IE possède un attribut très spécial : hasLayout. Cet attribut peut être donné au conteneur sous forme de mise en page. L'attribut hasLayout est un peu étrange. . Vous ne pouvez pas l'écrire directement. CSS démarre, mais il doit être démarré via javascript. En fait, il existe une autre façon de démarrer, qui consiste à utiliser un attribut CSS spécial pour démarrer hasLayout déguisé. tels que display:inline-block, float:left, etc. sont également OK, mais seul le zoom n'a pas d'effets secondaires)

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.