PNG related functions under IE browser_javascript skills

At present, the Internet has higher and higher requirements for web page effects, and it is inevitable to use PNG images. PNG is divided into several formats, PNG8, PNG24, PNG32, among which the most commonly used one, which also has moderate display effect and size, is PNG24. It supports translucency, transparency, and very rich colors. However, because most of our Chinese people use the IE series or browsers with IE as the core series, and because WINDOWS XP has a relatively large market share in the domestic market, and many people are still using XP. IE6 IE7 IE8 and other browsers, and these browsers have more or less gaps in their support for PNG. IE6 does not support PNG at all, and IE7 IE8 supports PNG incompletely. When changing the transparency of an image under IE7 IE8, PNG will not be supported. There will be a black border in the transparent area. If it is translucent, the entire translucent area will be black. This is unacceptable for pages that require beautiful appearance. After some research, I found that using PNG as the background, use Microsoft The unique filter loads images, which can solve the problem of IE6 not supporting PNG, and can also solve the problem of black edges when using JQUERY animation transparency effect under IE7 and IE8. There is a code with a real image, as follows:

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

Reference the jquery1.8 class library before the end tag of /body of the page, and then add the above code. There is no problem displaying PNG24 in IE6 7 8. If you need to perform animate animation or obtain pictures, you will find that in IE 6 7 8 times, the PNG image cannot be found, or there is no response when changing its position and transparency. The reason is that correctPNG replaces the IMG tags of all PNGs on the page with SPAN tags, and then uses filter: progid on the SPAN tags. :DXImageTransform.Microsoft.AlphaImageLoader loads the PNG image, so the recommended approach is to include the image in a DIV. Only one IMG tag is allowed in this DIV, and then perform position or transparency related operations on the DIV, for example:

<div id='test'><img  class="share-list-icon-shadow lazy"  src="/static/imghwm/default1.png"  data-src="style/images/icon-shadow.png" / alt="PNG related functions under IE browser_javascript skills" ></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

Another situation is that in addition to transparency and displacement of this image, I also need to change its width and height. In this case, I recommend the following method:

<div id="test"><img  class="share-list-icon-shadow lazy" src="/static/imghwm/default1.png" data-src="style/images/icon-shadow.png" alt="PNG related functions under IE browser_javascript skills" ></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: If you dynamically modify the transparency of a png image under IE7 and IE8, for example, if you apply a fadeIn and adjust the transparency of the image to 25%, a very strange bug will appear. The transparency information of the png will not be displayed. Got it! It turned into a very ugly black color!

Solution to the bug where the background of png images turns black under IE7 and IE8:

1. Don’t change the transparency of the image directly, but put a container for the image to modify the transparency of the container
For example, the original code is:

Modify to:

2. Add a background color to this container

It is very important. The key to solving bugs lies in this step, such as:

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

Under normal circumstances, the bug is solved at this point. If you still have problems, please see below:

3. Add zoom to the container: 1

zoom: 1 What role does it play? Why does IE have this bug?
These are two questions, but actually one answer. IE modifies transparency not through CSS attributes, but through filters. Therefore, if you want to understand this bug, you must find the reason from the filters. When filter acts on an object, the object must be tangible, that is, it must be a layout. IE has a very special attribute: hasLayout. This attribute can be given to the container as a layout. The hasLayout attribute is a bit strange. You cannot write it directly. css starts, but it must be started through javascript. In fact, there is another way to start, which is to use a special css attribute to start hasLayout in disguise. This css attribute is zoom (other attributes such as display:inline-block, float:left, etc. are also OK, but only zoom has no side effects)

The above is the entire content of this article, I hope you all like it.