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

问题描述

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

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

更新

让我们看看我的测试

gK7eZ41p>下载我的测试源代码.

谢谢

解决方案

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

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

我编写了一个简单的 javascript，将过滤器应用于每个带有 .PNG 扩展名的图像.我的动画在 IE 上运行良好.

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

var i;for (i in document.images) {如果(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 + "')";}}}

请告诉我是否适合您以及动画是否流畅.亲切的问候！

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,

解决方案

Hey, I don't know if you're still looking for an answer. A couple of days ago I had the same issue animating a div with a PNG image inside. I tried many solutions and the only one that worked fine is one I coded myself.

The issue seems to be IE lacking opacity support and proper PNG support, so it breaks PNG display after applying an opacity effect (I believe animation frameworks rely on the propietary MSIE filter "AlphaImageLoader" for opacity effect on IE). The curious thing (to me that still don't understand very well) is that this issue can be solved using the same filter to load the image before the animation.

I wrote a simple javascript that applies the filter to every image with .PNG extension. My animations run fine on IE with it.

I copy the code below. I'ts framework independent (it's pure JavaScript), but you have to put it inside your framework's DOM ready event (or use domready.js, like I did).

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 + "')";
        }
    }
}

Please let me know if worked fine for you and if animation runned smooth. Kind regards!

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