IE8 under jquery change png opacity appear black edge, IE6 under PNG transparent solution

At present, the Internet for the effect of Web pages more and more high, the inevitable use of PNG images, PNG is divided into several formats, PNG8 PNG24 PNG32, the most commonly used, but also display the effect and size of the relatively moderate is PNG24, support translucent, transparent, color is very rich, But because we people use IE series or IE as the core series of browsers accounted for the majority, and because of WINDOWS XP in the domestic market share is relatively large, and XP, and many are still using IE6 IE7 IE8 and other browsers, and these browsers for PNG support more or less a gap, IE6 completely does not support the PNG,IE7 IE8 support PNG is not complete, in the IE7 IE8 under the picture to change the transparency, the PNG transparent area will have a black border, if there is a translucent, the entire translucent area is black, which is not acceptable for the requirements of beautiful pages, Research, found that the PNG when the background, with Microsoft-specific filters to load the image, you can solve the problem of IE6 does not support PNG, and can also solve the IE7 and IE8 below the use of jquery animation transparency effect when there is a black edge problem, there is a real image of the code, as follows:

<script>functioncorrectpng () {varArversion = Navigator.appVersion.split ("MSIE")    varVersion = Parsefloat (arversion[1])    if(version >= 5.5) &&(document.body.filters)) {varlee_i = 0; vardocimgs=document.images;  for(varj = 0; J < Docimgs.length; J + +) {            varIMG =Docimgs[j]varImgname =img.src.toUpperCase (); if(Imgname.substring (imgname.length-3, imgname.length) = = "PNG" &&!img.getattribute ("Usemap") ) {lee_i++; varSpanid = Img.id | | ' Ra_png_ ' +lee_i.tostring (); varImgdata =NewImage (); Imgdata.prodata=Spanid; Imgdata.onload=function () {                    $("#" + This. Prodata). CSS ("width", This. Width + "px"). CSS ("height", This. Height + "px"); } imgdata.src=img.src; varImgid = "Id=" + Spanid + "'"; varImgclass = (img.classname)? "class=" + img.classname + "'": ""varImgtitle = (img.title)? "title=" + img.title + "'": "title=" "+ Img.alt +" "varImgstyle = "Display:inline-block;" +Img.style.cssTextif(Img.align = = "Left") Imgstyle = "float:left;" +Imgstyleif(Img.align = = "right") Imgstyle = "float:right;" +Imgstyleif(img.parentElement.href) Imgstyle = "Cursor:hand;" +Imgstylevarstrnewhtml = "<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; }        }    }}//determine whether IE8 and the following browsers, in fact, in addition to these three browsers do not support AddEventListener, other browsers are not a problemif(typeofWindow.addeventlistener = = "undefined" &&typeofDocument.getelementsbyclassname = = "undefined") {window.attachevent ("OnLoad", correctpng);}</script>

Refer to the jquery1.8 class library before the end tag of the page/body, add the above code, IE6 7 8 show PNG24 is no problem, if you need to perform animate animation or get a picture, found in IE 6 7 8 can not find PNG picture, Or found a change in its position and transparency is not responding, this is because Correctpng replaces all PNG img tags on the page with the span tag, and then uses FILTER:PROGID:D on the span label XImageTransform.Microsoft.AlphaImageLoader the PNG image is loaded in, so it is recommended to include the image in a div, only one img tag is allowed in this div, and then the position or transparency of the div is related to the operation Cases:

<DivID= ' Test '><imgsrc= ' Xxxx.png '/></Div><Script>$("#test"). Animate ({opacity:0.2, MarginLeft: -}, +,function() {alert ('Run complete');});</Script>

In another case, I would like to change the width and height of this image in addition to transparency and displacement, and for this, I recommend the following methods:

<DivID= ' Test '><imgsrc= ' Xxxx.png '/></Div><Script>$($("#test span")[0]||$("#test img")[0]). Animate ({opacity:0.2, MarginLeft: -, Width:'500px', Height:'500px'}, +,function() {alert ('Run complete');});</Script>

BUG: Under IE7 and IE8 if you dynamically modify the transparency of PNG images, for example, if you apply a fadein, the transparency of the image is set to 25%, then there will be a very strange bug,png transparent information! Turned into a very ugly black!

IE7 and IE8 png image background Black Bug solution: 1, do not directly change the transparency of the picture, but to the picture set a container, to modify the transparency of the container

For example the original code is:

Modified to:<div class="share-list-icon-shadow"><img src=" style/images/icon-shadow.png" /></div>

2. Add a background color to this container

Very important, the key to solving the bug is 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

In general, this bug is resolved, if you still have a problem, see below:

3, to the container to add a zoom:1zoom:1 play what role? Why does IE exist this bug?

This is two questions, which is actually an answer. IE modifies the transparency, not through the CSS properties, but through the filter filter , so to understand this bug, you need to find the reason from the filter filter. When filter acts on an object, the object must be a form, that is, it must be layout, and IE has a very special attribute:haslayout , this property can give the container into layout,haslayout This property is somewhat strange, You can't start with a direct write CSS, but you have to start with JavaScript, there is actually a way to start, that is, using special CSS properties, in disguise to start Haslayout, this CSS property is zoom (other properties such as display : Inline-block, Float:left, and so on, but only zoom no side effects.

IE8 under jquery change png opacity appear black edge, IE6 under PNG transparent solution