why does internet explorer change this png file?

I built a website and I have this png file which is a bordered image with drop shadow shading which looks fine in firefox, chrome, where the dropshadow is subtle and clean (just like it looks like in photoshop)

but when i view this in Internet explorer (6, 7 or 8), it shows up like this below:

where the drop shadow shows up as all black (no fading), and disjointed

again, this is just a pure image in an html page (not javascript drop shadow script or CSS)

does anyone have a suggestion on why png image would show up different on Interne开发者_如何学编程t Explorer.

Are you by any chance re-scaling the image by <img /> tag? If so, you can add

img {
   -ms-interpolation-mode: bicubic;
}

to your CSS to force IE to use bicubic interpolation on the images. That may solve it.

i fixed it with a combination of things:

1. This css:

   img {  
   background: transparent;
   
   -ms-filter:   "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
   
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);         /* IE6 & 7 */
   zoom: 1;
   }
   

2. Setting clearType = false in jquery cycle:

   $(function () {
      $('#s1').cycle({ fx: 'fade', speed: 1500, cleartype: false, timeout: 4500 });
    });
   

File transparency with .png files are not fully supported in IE versions 6,7,8 and it is a known bug. I believe the issue is fixed in IE9.

A good work around is use of the AlphaImageLoader filter that works in all versions of IE. Supporting documentation and an example work around that I have used in the past with success: http://support.microsoft.com/kb/294714.

Another work around is to convert the .png to a transparent .gif file.