jquery循环IE7透明png问题

Question

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

它在Firefox和Chrome中很好,但是在IE(版本7)中我得到了一种黑色,其中png透明度在淡入淡出期间.

这可以正常工作吗？

Answer 1

不幸的是,虽然IE7支持透明PNG,但一次只能将一个过滤器应用于一个元素.

您的应用程序中发生的是IE7正在将alpha过滤器应用于您的PNG,然后由jQuery请求为淡入淡出应用另一个alpha过滤器.如你所说,这有明显的结果.

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

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

另一种解决这个问题的方法是使用这个简单的jQuery插件,因为我无法改变结构.我会给予归因,但我真的不记得我在哪里找到它.

/* 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);

注意最初插件是为了修复IE6中的PNG透明度而编写的,但我修改了它以适应IE6 +中的问题.

旁注:我不记得我的头脑,但我认为IE8可能有同样的问题.如我错了请纠正我 :)

Answer 2

最近几天这让我很生气!终于找到了一个很好的解决方案.

将其添加到您的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;
}

图片来源:Dan Tello

Answer 3

尝试添加

cleartype: true, cleartypeNoBg: true

到你的周期jquery arugments.现在应该没事:)