All we have met a problem when display a PNG image on IE within transparent background, right? So, today i will list out some ways that i know to fix the PNG transparent displayed on the IE 6 and below.

Using js

bobosola script:

Download Here - Then inlucde this code to your file:
<!--[if lt IE 7.]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->

Note the use of the defer keyword. This trick causes the images to be replaced before they are rendered. Earlier versions of this script did not use this method, occasionally resulting in an unpleasant screen flicker as the PNGs were being filtered. The code in the include file is slightly different from the copy and paste code referred to above, so I recommend downloading my file rather than making your own.

Here is a demo page using the Include file method. This method is arguably better for use with multiples of pages, as it only requires three lines of code per page. The JS file is only 2KB in size and will be cached after the first download. It will therefore incur no further download overhead on subsequent pages. The download time should be around 0.3 seconds on an average 48kbps dial-up modem connection.

——-

Dean Edwards Solution:

IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

You do not need to include IE7.js if you are using IE8.js

PNG
The script only fixes images named: *-trans.png

Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Download: http://ie7-js.googlecode.com/svn/version/

Using Behavior

First you will need to download these two files, and upload them to your web server: msie.htc & blank.gif

Then add this CSS in between the “head” tags of your web document:

@media screen { img { _behavior: url(msie.htc); } }
If you want to apply to other elements, list the elements along with img. Try and keep the number of elements modified low- as this requires DirectX to work, and it eats memory.

Other ways

Sleight solution using the original AlphaImageLoader to fix the PNG background by including it into the js file from Drew Mclellan .

Download bgsleight.js

SuperSleight solution developed by 24ways from Sleight solution with some new features:

• Works with both inline and background images, replacing the need for both sleight and bgsleight
• Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
• Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
• Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
• Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

Download SuperSleight

<!--[if lte IE 6]><script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

There’r still some ways to fix PNG transparent on IE, but i think it’s enough. Becoz i also can’t find any solution that can fix displaying PNG Transparent on IE for both single image, background image within link and text area. I also recommend using Dean Edwards Solution instead of Sleight, SuperSleight or the others becoz of its loading speed and other features of that script..

Share This