jquery循环IE7透明png问题 [英] jquery cycle IE7 transparent png problem

问题描述

当我在 IE7 中有透明的 png 文件时，我无法让 jquery 循环工作

在 Firefox 和 Chrome 中没问题，但在 IE(版本 7)中我得到黑色png 透明度在淡入淡出期间.

这可以正常工作吗?

解决方案

遗憾的是，虽然 IE7 支持透明 PNG，但一次只能对一个元素应用一个过滤器.

在您的应用程序中发生的情况是 IE7 将 alpha 过滤器应用于您的 PNG，然后 jQuery 要求应用另一个 alpha 过滤器进行淡入淡出.就像你说的，这有明显的效果.

解决这个问题的方法是将您的 png 嵌套在容器中，然后淡化容器.有点像这样:

<img src="transparent.png" alt=""/>

解决这个问题的另一种方法是我使用的这个简单的 jQuery 插件，因为我无法更改结构.我会给出归属，但老实说我不记得我在哪里找到的.

/* IE PNG 修复多个过滤器 */(功能($){如果(！$)返回；$.fn.extend({fixPNG:函数(sizingMethod，forceBG){如果 (!($.browser.msie)) 返回这个；var emptyimg = "empty.gif";//空1x1px GIF的路径在这里sizingMethod = sizingMethod ||规模";//sizingMethod，默认为缩放(匹配图片尺寸)this.each(function() {var isImg = (forceBG) ?false : jQuery.nodeName(this, "img"),imgname = (isImg) ?this.src : this.currentStyle.backgroundImage,src = (isImg) ?imgname : imgname.substring(5,imgname.length-2);this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";if (isImg) this.src = emptyimg;else this.style.backgroundImage = "url(" + emptyimg + ")";});返回这个；}});})(jQuery);

注意 最初编写该插件是为了修复 IE6 中的 PNG 透明度，但我对其进行了修改以解决您在 IE6+ 中的问题.

旁注:我记不清了，但我认为 IE8 可能有同样的问题.如果我错了，请纠正我:)

I'm having trouble getting jquery cycle to work when I have transparent png files in IE7

It's fine in Firefox and Chrome but in IE (version 7) I get a black colour where the png transparency is during the fade.

Can this be made to work right?

解决方案

unfortunately, though IE7 supports transparent PNG's, only one filter can be applied to an element at a time.

What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.

The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

Another way to get around this is this simple jQuery plugin that i used because i couldn't change the structure. I would give attribution but I honestly cant remember where i found it.

/* IE PNG fix multiple filters */
(function ($) {
    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                    imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                    src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                if (isImg) this.src = emptyimg;
                else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
        }
    });
})(jQuery);

NOTE Originally the plugin was written to fix PNG transparency in IE6 but I modified it to work with your problem in IE6+.

Sidenote: I cant remember off the top of my head but i think that IE8 may have the same problem. Correct me if i'm wrong :)

这篇关于jquery循环IE7透明png问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！