Internet Explorer通过半透明div背景剪切文本

Question

嗯，说实话，我并不知道如何描述这个以外的事情：

“为什么这在IE8中不起作用，但在Firefox或Chrome中运行良好”： http://jsfiddle.net/iddqd/xEfSK/

但是，我会尝试： 因此，当它没有动画时看起来很好，似乎有两个问题。一个是IE在淡入淡出时不使用消除锯齿，第二个是文本以某种方式切入半透明div。

我尝试过各种黑客攻击，例如使用回调函数删除过滤器，将文本放在一个单独的div中，将whiteBackground放在框外。在所有组合中，我找不到可行的解决方案。

任何提示？

Answer 1

简短而简单的答案是，IE8及更低版本不支持opacity，也不支持任何类型的透明度模拟器，例如rgba()着色。它只能通过使用（现已弃用的）filter语法来在内部调用DirectX呈现来模拟这一点。这就是jQuery在内部尝试提供“最佳可能的预期结果”的原因，但是，自从DirectX过滤器对图像进行操作以来，它看起来会更加丑陋，因此浏览器必须在内部进行渲染并将其传递，从而创建2个问题：

• 由于无法应用ClearType，因此消除锯齿很麻烦
• 由于DirectX尝试在顶部呈现，因此可能存在堆叠问题，例如在转换期间不会始终以正确的顺序显示单独的图层

你描述了这两个问题，这些问题与过滤黑客一样令人遗憾。您可以找到一些可能的解决方案on this page，但一般情况下我只是接受这在IE＆lt; = 8上无法正常工作，和/或正常降级以跳过这些浏览器中的淡入淡出。