Question

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的背景看起来很黑。当我删除不透明效果时，没有问题。

解决方案是什么？

Answer 1

对我来说，它只是在jQuery的.animate（）函数中包含带有空值的filter属性

也许这对你也有用。

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

此外，您可能必须从按钮的CSS中删除过滤器属性。

Answer 2

filter:'' hack不再适用于当前的jQuery（1.6.1）

Answer 3

目前我还没有解决这方面的问题。只需要等待IE赶上世界其他地方。几天前我不得不在最近的一个项目中放弃这样的功能。遗憾的是，你无法使用带有IE淡入淡出和淡出jQuery的边缘PNG。

Answer 4

嘿，看起来桑普森可能错了。请参阅Dave Shea的帖子：http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

我将在这里转发解决方案的三个段落：

当然，没有任何版本的IE支持CSS opacity属性，   所以jQuery改为应用不透明度   通过利用IE专有   AlphaImageLoader过滤器。这结束了   成为的根本原因   （seemingly well-known）错误。该   建议修复是应用的   父元素的透明度   相反，但我没有成功   解决方法。

什么工作是适用的名为DD_belatedPNG的小型库   通过VML代替的PNG透明度   AlphaImageLoader。它的设计目的   IE6，但它在IE7中工作得很好   好。对于IE8，我被迫抛出   输出X-UA-Compatible meta标记   并为此步骤IE8降低到IE7模式   特别页面。

它仍然不完美。我注意到一个微弱的白色边框戳戳   通过强迫的较低的不透明度   我稍微调整悬停效果   适用于所有版本的IE。但是你知道，   尽管如此，它还是非常好的   够了。

Mmmhmmm ...... 6个月前问这个问题时，这个解决方案没有弹出，这很奇怪。当然，这篇博文并不存在，但解决方案已经存在了很长一段时间。很奇怪没有人注意到它......

Answer 5

我认为这里有一个真正的解决方案： http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

在我的情况下，它解决了我的动画png图像上带有透明背景的黑色bg。它就像一个魅力。在ie7 +上测试我暂时无法测试ie6。

希望它能帮助每一个人:) 于连

Answer 6

将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");

Answer 7

有趣的说明：jQueryTOOLS在所有IE版本中使用GIF作为工具提示的错误修正。 Demo

Answer 8

有一个库可以解决这个问题：jCSML。我已经尝试过它，它可以在IE 7 +中为透明的png设置动画。

Answer 9

这里是固定的！更新到最新的jQuery。而已。它之后工作。

Answer 10

感谢Julien的回答，它引导我朝着正确的方向前进！

然而，在图像不透明度转换期间，我仍然在文本周围出现灰色晕圈。当它是静态时看起来很好，但它仍然会产生一个奇怪的轻微灰色晕（IE 8）。我通过更改为下面的值来修复它。

另外，我必须单独声明“zoom：1”属性，因为IE 8只是将该值粉碎到background属性的末尾。 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。

重申朱利安，这个解决方案来自Viget.com。

Internet Explorer上的透明PNG动画问题

10 个答案: