Question

我正在研究一个jQuery通知栏示例，您可以在此处看到：jQuery notification bar example

但无论出于何种原因，用于在IE 7和8中定义透明度的CSS都无效。如果你看一下IE 7/8中的例子，你会看到.png关闭按钮的透明度和“reopen”元素的透明度不起作用。

我之前使用此代码成功地在IE中定义了元素的透明度，但我无法弄清楚为什么它在这个例子中不起作用。

当我阅读this post时，我以为我可能会碰到某些东西，但在尝试使用hasLayout属性提到的解决方案后，我仍然没有运气。

非常感谢任何帮助。如果您需要任何其他详细信息，请与我们联系。

谢谢！

Answer 1

哇somebody else just asked a question about this。在旧版本的IE中，您无法通过CSS效果的透明度来构建PNG alpha通道的透明度。一旦您应用了样式，它就会尝试从图像中进行透明化。

是的，这是非常蹩脚的。

Answer 2

opacity: 0.50;
filter:alpha(opacity=50);

这修复了IE的不透明度。使用50％透明度作为示例值。

至于hellobar_close，给它一个背景颜色，它应该工作。 IE对.png图像的透明度支持不足。

Answer 3

好的我相信在上面提供的答案和我自己的一些额外研究的帮助下，我已回答了我的问题。

这个问题实际上有两个部分：

1。） IE中的.png关闭按钮的透明度问题 - 上面的Pointy回答了这部分内容。根据Pointy的说法“浏览器无法同时管理透明PNG的合成以及对图像的任何不透明效果。换句话说，对于任何给定的像素，您要么从PNG本身获得alpha通道效果，要么从不透明度过滤器获得，但不是两个。“ （引自他在IE7 and "jaggies" around layered PNGs (with jQuery)的回答）

我想要发生的是.png关闭按钮在其正常状态下是半透明的，在其悬停状态下是完全不透明的，但显然这在IE中仅使用一个单独的图像和CSS是不可能实现的透明度。因此，为了解决这个问题，我只需要制作一个双状态.png图像来获得漂亮的悬停效果，而不是依靠CSS透明度来处理该组件。

2。）“重新打开”按钮的透明度问题 - 此按钮应该是半透明的，但在IE中不起作用。在我自己做了一些广泛的研究后，我发现了这篇文章：jquery IE Fadein and Fadeout Opacity。 woodstylee在那篇文章中的答案解决了我的问题。

由于我不完全理解的一些奇怪的IE错误，我需要在应用任何转换/淡入淡出效果之前使用jQuery / javascript 声明元素的不透明度。

显然，IE中的jQuery淡化/转换和CSS不透明存在某种冲突。如果其他人有关于此主题的其他信息，请发布！

当我使用以下内容更新我的代码时，我能够成功地让我的“重新打开”按钮在IE中显示为半透明。

$('#hello_mini').css('filter', 'alpha(opacity=75)');

请注意，上面的代码行需要放在之前这一行：

$('#hello_mini').show('slow');

另外值得注意的是......这个IE bug似乎只适用于jQuery show（）和hide（）函数。当我将动画切换到slideUp（）或slideDown（）时，透明度工作正常，没有任何额外的JavaScript。

所以底线...当应用于通过jQuery show（）和hide（）
动画的元素时，IE中的CSS透明度会出现奇怪的现象。
如果我在研究中发现任何其他内容，我会在此发布。

Here is a link to my updated example, which works in IE 7/8 now.

为什么在此示例中CSS透明度无法在IE 7/8中运行？

3 个答案: