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/

PS。我试图发布一个我的问题究竟是什么的图像但是因为我刚刚注册了这不可能作为垃圾邮件预防措施。

Answer 1

IE8的不透明度过滤器非常糟糕。它有点像一些工作，但它充满了bug和陷阱。 jQuery让它稍微不那么痛苦，但即便如此，它也很容易被其中一个怪癖所困扰。

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

正如我所说，我现在无法自己尝试，但我的猜测是你遇到了其中一个无法解决的问题。所以我建议寻找替代解决方案。

在我们的案例中，经过大量的工作，我们最终完全放弃了因此而逐渐淡化元素的想法，并转而采用从其他元素后面滑出它们的策略。效果足够相似，客户很高兴，并且它适用于所有浏览器。