Internet Explorer上的透明PNG动画问题
CSS代码：
#btn{ background: url(transparent.png) no-repeat; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } 的JavaScript / jQuery的：
$("#btn").animate({opacity:1,"margin-left":"-25px"});
我对Firefox，Chrome等上面的代码没有任何问题。 但它不适用于任何版本的Internet Explorer。
问题是PNG图像呈现奇怪，透明PNG的背景看起来很黑。 当我删除不透明效果时，没有问题。
解决办法是什么？
目前我还没有解决这方面的问题。 只需要等待IE赶上世界其他地方。 几天前我不得不在最近的一个项目中放弃这样的function。 遗憾的是，你无法使用带有IE淡入淡出和淡出jQuery的边缘PNG。
对我来说，它只是在jQuery的.animate（）函数中包含带有空值的filter属性
也许这对你也有用。
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
此外，您可能必须从按钮的CSS中删除filter属性。
filter:'' hack不再适用于当前的jQuery（1.6.1）
嘿，看起来桑普森可能错了。 请参阅Dave Shea的post： http ： //mezzoblue.com/archives/2010/05/20/ie8_still_fa/
我将在这里转发解决方案的三个段落：
当然，没有版本的IE支持CSS opacity属性，所以jQuery通过利用IE专有的
AlphaImageLoaderfilter来应用不透明度。 这最终成为（ 看似众所周知的 ）bug的根本原因。 建议的修复方法是将透明度应用于父元素，但我对该解决方法几乎没有成功。什么工作是一个名为DD_belatedPNG的小库，通过VML而不是
AlphaImageLoader应用PNG透明度。 它是为IE6设计的，但它在IE7中也可以正常工作。 对于IE8，我被迫抛出一个X-UA兼容的meta标记，并将IE8步骤降低到这个特定页面的IE7模式。它仍然不完美。 我注意到一个微弱的白色边框在较低的不透明度下戳穿，迫使我稍微调整所有IE版本的hover效果。 但是你知道，尽管如此，它还是非常好的。
嗯…很奇怪6个月前问这个问题时，这个解决方案没有弹出。 当然，这篇博文并不存在，但解决方案已经存在了很长一段时间。 很奇怪没有人注意到它……
我认为这里有一个真正的解决方案： http ： //www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/
在我的情况下，它解决了我的动画png图像上具有透明背景的awefull black bg。 它就像一个魅力。 测试ie7 +我暂时无法测试ie6。
希望它能帮助每一个人:) Julien
将PNG图像用于现代浏览器（mozilla，Opera，Chrome等）：
background:url(../images/banner01.png) no-repeat right 13px;
添加此For IE（使用其他CSS或使用IE hack）
/* ie fix */ background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png", sizingMethod="crop");
有趣的说明：jQueryTOOLS在所有IE版本中使用GIF作为工具提示的错误修正。 演示
有一个库可以解决这个问题： jCSML 。 我已经尝试过它，它可以在IE 7+中为透明的png设置动画。
这里是固定的！ 更新到最新的jQuery。 而已。 它在那之后工作。
感谢Julien的回答，它引导我朝着正确的方向前进！
但是，在图像不透明度转换期间，我仍然在文本周围出现灰色晕圈。 当它是静态时看起来很好，但它仍然会产生一个奇怪的轻微灰色晕（IE 8）。 我通过更改为下面的值来修复它。
另外，我不得不单独声明“zoom：1”属性，因为IE 8只是将该值粉碎到background属性的末尾。 background-color: transparent;相同background-color: transparent; IE糟透了。
我的工作CSS：
.classOfParentElement img { -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */ } .classOfParentElement img { -ms-zoom: 1; zoom: 1; background-color: transparent; }
请注意，我必须将endColorstr=#00FFFFFF更改为endColorstr=#FFFFFFFF 。
重申Julien，这个解决方案来自Viget.com。