Solve the problem that PNG images cannot be displayed in IE6.

 

As PNG images cannot be normally displayed in IE6, a common method is to use a filter after multiple parties look for information:

This method is not very good, that is, it will destroy the original , because it replaces with <span>, and many attributes in IMG are lost.

The following is an example:

 

Designers know that there are generally two types of transparent background images: GIF and PNG. However, the transparent background images in GIF format may have sertices, which reduces the product image score. If it is in PNG format, IE6 does not support it, and the background is gray by default. Is there a perfect solution?

Using js to achieve transparent effect of PNG compatibility with IE6:

PNG. js

Add this sentence to the image code: <! -[If lt IE 7.]>
Function correctpng () <br/>{< br/> for (VAR I = 0; I <document. images. length; I ++) <br/>{< br/> var IMG = document. images [I] <br/> var imgname = IMG. SRC. touppercase () <br/> If (imgname. substring (imgname. length-3, imgname. length) = "PNG") <br/>{< br/> var imgid = (IMG. ID )? "Id = '" + IMG. ID + "'": "" <br/> var imgclass = (IMG. classname )? "Class = '" + IMG. classname + "'": "" <br/> var imgtitle = (IMG. Title )? "Title = '" + IMG. title + "'": "Title ='" + IMG. alt + "'" <br/> var imgstyle = "display: inline-block;" + img.style.css text <br/> If (IMG. align = "Left") imgstyle = "float: Left;" + imgstyle <br/> If (IMG. align = "right") imgstyle = "float: right;" + imgstyle <br/> If (IMG. parentelement. href) imgstyle = "cursor: hand; "+ imgstyle <br/> var strnewhtml =" <span "+ imgid + imgclass + imgtitle <br/> +" style = '/'mce_style ='/'"+" Width: "+ IMG. width + "PX; Height:" + IMG. height + "PX;" + imgstyle + ";" <br/> + "filter: progid: DXImageTransform. microsoft. alphaimageloader "<br/> +" (src =/'"+ IMG. SRC + "/', sizingmethod = 'Scale');/" + "> </span>" <br/> IMG. outerhtml = strnewhtml <br/> I = I-1 <br/>}< br/> window. attachevent ("onLoad", correctpng );

<SCRIPT defer type = "text/JavaScript" src = "images/PNG. js"> </SCRIPT>
<! [Endif]-> </span> <ol> <! -[If lt IE 7.]>

Comparison of results:
Before processing

After processing: