css - 文本在 IE7/8 中的透明背景上不抗锯齿

Question

示例:http://jsfiddle.net/NBWmU/1/

我正在使用以下 CSS 使我的 div 背景在尽可能多的浏览器中透明:

background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)";

出于某种原因，在 IE8 中，透明 div 顶部的文本显得清晰且像素化，并且与普通背景上 div 外部的相同文本看起来完全不同。我还没有在其他浏览器中测试过。

有人知道我可以强制文本在任何地方呈现相同的方法吗？我试过使用透明的 png，但这导致了一些其他的渲染问题，我希望有另一种方法。

Answer 1

是的:不要使用 -ms-filter 和 filter:progid:DXImageTransform 等。

过滤器的实现中存在一个错误，导致它使用后备文本呈现器。使其保持一致的唯一方法是在涉及文本时不使用它，或者在所有文本上使用它(这样所有文本都同样丑陋和像素化)。

我通常做的是，我只使用标准的 css 来实现透明度，例如 rgba() 颜色、不透明度等。在 IE 特定的 css 中，我将背景/文本颜色设置为与它的外观近似匹配真正的透明度。

对于图像，我创建了一个透明的图像 Sprite 的 IE 特定副本。但是透明的 png 在 ie7 和更早的版本中会导致同样的问题，所以我通常在 ie7.css 中退回到完全不透明(即不透明)