Use DD_belatedPNG to enable IE6 to support PNG transparent images

As we all know, IE6 does not support transparent PNG images, and PNG images have effects that other graphics formats cannot achieve in terms of expressiveness in web design. The fatal flaw of IE6 greatly limits the creative performance of web design.

Although there are many ways to solve transparent PNG in IE6, from using IE-specific filters or expressions, to javascript + transparent GIF replacement. However, these methods have one disadvantage, which is that they do not support the background-position and background-repeat attributes in CSS. Using DD_belatedPNG.js can perfectly solve the problem of PNG image transparency under IE6, and supports background-position and background-repeat. This is not available in other methods. At the same time, DD_belatedPNG also supports a:hover attribute and <img>.

Our website has added DD_belatedPNG to process navigation PNG transparent images to keep the same appearance under different browsers.

DD_belatedPNG official website: Click here to visit!

1. Download the JS file first:

Then refer to the code in the page:

 <!–[ifIE6]>
 <scripttype=text/javascriptsrc=Downloaded JS path></script>
 <script>
 DD_belatedPNG.fix('CSS selector, application type');
 </script>
 <![endif]->

The reference function is DD_belatedPNG.fix() , and the CSS selector (ID selector and class selector can be used) and application type (divided into img and background) in brackets.

Such as DD_belatedPNG.fix('#box-one, img ') or DD_belatedPNG.fix('.header, background ') etc.

These can be abbreviated as DD_belatedPNG.fix('#box-one, .header, img,background '); .

More selectors such as DD_belatedPNG.fix('#box-one, .header,#footer,.box-two a:hover, img,background '); and so on.

In addition, to solve the background image flickering under IE6, you can add the following script to the page:

 <!–[ifIE6]>
 <scripttype=text/javascript>
 //<![CDATA[
 if((window.navigator.appName.toUpperCase().indexOf(MICROSOFT)>=0)&&(document.execCommand))
 try{
 document.execCommand(BackgroundImageCache,false,true);
 }
 catch(e){}
 //]]>
 </script>
 <![endif]->