Internet Explorer 8 中的透明度/不透明度问题

Question

我正在为客户开发一个“单页”网站。 该网站在大多数浏览器中按我想要的方式显示，但是我在 Windows XP 上安装的 Internet Explorer 8 的特定组合中遇到了问题。

由于客户的需求和图形设计师的设计相结合，不同的元素被放置在彼此之上，并且需要根据导航淡入或淡出。

在 IE9&10（包括开发者工具中的 IE8 文档属性）、Chrome 以及 Win2K8 服务器上的 IE8 等浏览器中一切正常。

但是在 IE8 中，不可见元素的透明度似乎是由同一位置的“将是”可见的兄弟继承。

我搜索了不同的解决方案并尝试了不同的方法，例如：

opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-filter: alpha(opacity=0);

还有一个额外但大部分是不必要的：

display: block; 

或

zoom: 1;

但以上方法都不能解决问题。

以前有没有人遇到过或解决过这个问题。 或者在 IE8 的同一位置淡化多个元素只是不正确的方法。

请参阅此小提琴以了解我的预期功能： http://jsfiddle.net/6HZGw/11/

附言。我试图张贴一张图片，说明我的问题到底出在哪里，但由于我刚刚注册，所以这不可能作为防止垃圾邮件的措施。

所以这里是问题的链接：
http://img338.imageshack.us/img338/4458/ie8f.png

以及指向预期视图的链接：
http://img255.imageshack.us/img255/8391/chromeothers.png

Answer 1

IE8 的不透明度过滤器真的很糟糕。它在某些时候有点工作，但它充满了错误和陷阱。 jQuery 让它稍微不那么痛苦，但即便如此，它也很容易被其中一个怪癖所吸引。

我现在没有可用的 IE8 或 XP 来测试它，但我自己也走上了这条路，也遇到了类似的结果，特别是在处理多个元素时，尤其是当这些元素混合在一起时文字和图形。

正如我所说，我现在无法亲自尝试，但我猜您遇到了无法解决的问题之一。所以我建议寻找替代解决方案。

在我们的案例中，经过大量工作，我们最终完全放弃了让元素淡入淡出的想法，转而采用将它们从其他元素后面滑出的策略。效果非常相似，客户很满意，并且在所有浏览器中都有效。