如何在IE8中解决/破解淡化的半透明PNG错误？ [英] How to solve/hack fading semi-transparent PNG bug in IE8?

问题描述

如您所知，IE6的错误是无法使用非标准样式（如过滤器）显示半透明PNG文件。在IE7中，此问题已得到修复。但它仍然有一些关于PNG文件的错误。它无法正确显示淡入淡出的半透明PNG文件。使用半透明PNG文件在jQuery中使用show / hide功能时，您可以清楚地看到它。图像的背景显示为不透明的黑色。

您是否有任何想法通过使用jQuery来解决这个问题。

更新

让我们看看我的测试

 ＃img2 
 {
 background：#fff; 
} 
  

但是，如果你有像我的bug这样的复杂图像，你应该尝试在图片下方添加几乎不可见的图层，并将背景颜色设置为您喜欢的颜色。

As you know, IE6 has bug that can't display semi-transparent PNG file without using non-standard style like filter. In IE7, this problem is fixed. But It still has some bug about PNG file. It can't correctly display fading semi-transparent PNG file. You can clearly see it when you use show/hide function in jQuery with semi-transparent PNG file. The background of image is displayed with non-transparent black color.

Do you have any idea for solve this question by using jQuery.

Update

Let's see my testing

alt text http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

As you see, IE8 always incorrectly displays PNG-24 image. Moreover, IE8 still correctly display PNG-8 image when I fade(jQuery.fadeOut function) it only. But It incorrectly display PNG-8 image when I fade & resize(jQuery.hide function) at the same time.

PS. You can download my testing source code from here.

Thanks,

解决方案

I just found the way to solve problem by chance when I try to fix IE8 bug in the following image.

The easiest way, You just define background of current image like the below code. Or you can see full source code and demo on my JsFiddle

#img2
{
    background:#fff;   
}

However, if you have some complex image like my bug, you should try to add almost invisible layer below your image and set background color to some color that you like.

这篇关于如何在IE8中解决/破解淡化的半透明PNG错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！