Question

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

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

更新

让我们看看我的测试

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

如您所见，IE8始终错误地显示PNG-24图像。而且，当我淡入淡出（jQuery.fadeOut函数）时，IE8仍能正确显示PNG-8图像。但是，当我淡出时，它会错误地显示PNG-8图像。同时调整大小（jQuery.hide函数）。

PS。您可以从here下载我的测试源代码。

谢谢，

Answer 1

嘿，我不知道你是否还在寻找答案。几天前，我有同样的问题，动画一个带有PNG图像的div。我尝试了很多解决方案，唯一一个工作正常的解决方案是我自己编写的解决方案。

问题似乎是IE缺乏不透明度支持和正确的PNG支持，所以它在应用不透明效果后打破了PNG显示（我相信动画框架依赖于专有的IEIE过滤器“AlphaImageLoader”对IE的不透明效果）。奇怪的是（对我来说仍然不太了解）是可以使用相同的过滤器在动画之前加载图像来解决这个问题。

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

我复制下面的代码。我是框架独立的（它是纯粹的JavaScript），但你必须将它放在框架的DOM ready事件中（或者像我一样使用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 + "')";
        }
    }
}

如果你工作得很好并且动画顺利运行，请告诉我。亲切的问候！

Answer 2

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

CSS中的

.iefix
{
 /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

简单，快速，美观:)）

Answer 3

问题的根本原因似乎是Micrsoft IE对PNG alpha透明度的支持不足（在任何版本的IE中）。到目前为止IE6是最糟糕的攻击者，将alpha透明像素渲染为淡蓝色。 IE7和IE8处理PNG alpha透明度，但无法处理改变PNG中alpha透明像素的不透明度 - 它们呈现为黑色而不是透明。

我对此的修复取决于具体情况。以下是一些方法：

只需使用GIF即可。 GIF不会显得平滑（因为颜色深度有限），但像素是完全透明的。
使用此处提供的IE PNG修补程序：http://git.twinhelix.com/cgit/iepngfix/ - 打开index.html并阅读评论。
动画动画，但不要为PNG图像的不透明度设置动画。
使用JavaScript测试，条件注释或CSS的仅MSIE“行为”扩展，有条件地执行上述任何或所有操作。以下是其中任何一项可行的方法：

有条件的评论：

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

在css中：

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

通过JavaScript检测：

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

iepngfix.htc行为的工作原理是将PNG替换为空白图像（blank.gif），然后使用Microsoft的DXImageTransform例程将PNG作为过滤器加载到空白图像上。还有其他的PNG修复程序可以通过在div或spans中包装东西来工作，但是那些通常会破坏你的布局，所以我避免使用它们。

希望这有帮助。

Answer 4

我已经为IE 6/7/8修复了这个问题。

大致看起来像这样：

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut('slow');

请注意，“filter”属性仅隐含针对IE。

Answer 5

我使用此功能将图像预加载到图库轮播中。它基于亚历杭德罗·加西亚·伊格莱西亚斯的回答。它摆脱了IE 6中的“黑晕”。 8.

function preloadImages(id) {
    var c = new Array();
    $(id+' img').each( function(j) {
        c[j] = new Image();
        c[j].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

这样打电话：

preloadImages('#Stage');

Answer 6

当我尝试修复下图中的IE8错误时，我刚刚找到了解决问题的方法。

enter image description here

最简单的方法，您只需定义当前图像的背景，如下面的代码。或者你可以看到full source code and demo on my JsFiddle

#img2
{
    background:#fff;   
}

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

enter image description here

Answer 7

为什么不试试PNG8。 PNG8被广泛称为全透明和GIF文件格式。但是使用Fireworks can be semi-transparent as is PNG24导出。优点是IE6显示带有半透明像素的PNG8，因为它是GIF - 或者具有完全透明度，但IE7和8正确显示为PNG24，如果你用jQuery或任何js库淡化它，它将不会显示背景灰色，因为它不使用着名的-filter属性。

Answer 8

我对IE6使用修改后的PNG修复程序，效果很好：

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.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);

别忘了上传x.gif。（透明的1x1 gif）

Answer 9

优点是IE6显示带有半透明像素的PNG8，因为它是GIF - 或者具有完全透明度，但IE7和8正确显示为PNG24，如果你用jQuery或任何js库淡化它，它将不会用灰色显示背景，因为它不使用着名的-filter属性。

IE中只有一种方法可以进行不透明度变换。过滤器：alpha（不透明度:)。 jQuery怎么做呢？

Answer 10

到目前为止，我没有真正对我有用，因为我读过通过CSS和透明PNG结合不透明度设置。这个解决方案最终在IE8上的动画不透明页面上为我工作。此页面上列出的其他解决方案无效。

#img {
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
    zoom:1;
    width:600px;
    height:400px;
}

<div id='img'></div>

请注意，过滤器首先是Alpha过滤器，然后是AlphaImageLoader。

Answer 11

我对IE8和IE7有同样令人讨厌的问题..如果Cmc解决方案能够解决这个问题吗？

我的网址是http://www.onlinebrand.dk（热门菜单会像Google一样淡入淡出:)但是IE并不关心。）

编辑：我自己测试过，即使我设置宽度和高度，重复img。它不起作用

我刚刚找到了另一种解决方法，其中Fadein是一个包装器，而不是带有.png bg图像的div。它有点工作，我现在在IE中有点透明度，但也有一些填充/边距......总体上很奇怪..

比尔盖茨，对此怎么了？为什么我们不能相处？

Answer 12

这可以像Stu在这里完成的那样完成：http://www.cssplay.co.uk/menus/flyout_horizontal.html

Answer 13

为图片定义纯色背景色：

.container img { 背景颜色：白色; }
将图片的 background-image css属性定义为 src 属性：

$（'img.png-trans'）。each（function（）{ $（this）.css（'background-image'，$（this）.attr（'src'））; }）;

优点：您无需更改标记

缺点：有时使用纯色背景并不是一种可接受的解决方案。它通常适合我。

Answer 14

将Unit PNG Fix用于半透明png-24。

如何在IE8中解决/破解淡化的半透明PNG错误？

14 个答案: