jquery - 如何解决/破解 IE8 中半透明 PNG 褪色问题？

Question

如您所知，IE6 有一个 bug，如果不使用滤镜等非标准样式，就无法显示半透明 PNG 文件。在 IE7 中，此问题已得到修复。但它仍然存在一些关于 PNG 文件的错误。它无法正确显示褪色的半透明 PNG 文件。当您在 jQuery 中使用半透明 PNG 文件的显示/隐藏功能时，您可以清楚地看到它。图像背景以不透明的黑色显示。

你有什么想法可以使用 jQuery 来解决这个问题吗？

更新

让我们看看我的测试

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

如您所见，IE8 总是错误地显示 PNG-24 图像。此外，仅当我淡入淡出(jQuery.fadeOut 函数)时，IE8 仍然可以正确显示 PNG-8 图像。但是当我同时淡入淡出和调整大小(jQuery.hide 函数)时，它会错误地显示 PNG-8 图像。

PS。你可以从 here下载我的测试源码.

谢谢，

Answer 1

嘿，我不知道你是否还在寻找答案。几天前，我在使用 PNG 图像制作 div 动画时遇到了同样的问题。我尝试了很多解决方案，唯一有效的解决方案是我自己编写的解决方案。

问题似乎是 IE 缺乏不透明度支持和适当的 PNG 支持，因此在应用不透明度效果后它会破坏 PNG 显示(我相信动画框架依赖于专有的 MSIE 过滤器“AlphaImageLoader”来实现 IE 上的不透明度效果)。奇怪的是(对我来说仍然不太明白)是这个问题可以使用相同的过滤器在动画之前加载图像来解决。

我编写了一个简单的 JavaScript，将过滤器应用于每个扩展名为 .PNG 的图像。我的动画在 IE 上运行得很好。

我复制下面的代码。我独立于框架(它是纯 JavaScript)，但您必须将其放入框架的 DOM 就绪事件中(或使用 domready.js，就像我一样)。

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

请告诉我是否适合您以及动画是否运行顺利。亲切的问候!