为什么internet explorer会改变这个png文件？

Question

我建立了一个网站，我有这个png文件，带有投影阴影的边框图像，在firefox，chrome中看起来很好，其中的阴影是微妙和干净的（就像在photoshop中看起来一样）

但是当我在Internet Explorer（6,7或8）中查看时，它会显示如下：

其中投影显示为全黑（无衰落）和脱节

再次，这只是一个html页面中的纯图像（不是javascript投影脚本或CSS）

有没有人建议为什么png图像会在Internet Explorer上显示不同。

Answer 1

您是否有机会通过<img />标记重新缩放图片？如果是这样，您可以添加

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

到你的CSS迫使IE在图像上使用双三次插值。这可能会解决它。

Answer 2

我用一组东西修复它：

1. 这个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. 在jquery循环中设置clearType = false：

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

Answer 3

IE版本6,7,8不完全支持.png文件的文件透明度，这是一个已知的错误。我相信这个问题已在IE9中修复。

一个很好的解决方法是使用适用于所有IE版本的AlphaImageLoader过滤器。 支持文档和示例解决了我过去使用过的成功案例： http://support.microsoft.com/kb/294714

另一种解决方法是将.png转换为透明的.gif文件。