Question

RGBA - IE的解决方法是“DXImageTransform.Microsoft.gradient”。请查看www.css3please.com提供的方便工具，以实现跨浏览器透明度，但在IE上应用此渐变（IE8） - 作品，但文字失去了清晰/易读性。

应用georgia使字体在所有浏览器上看起来均匀，但在应用渐变后文本显示不正确。这是JSFiddle http://jsfiddle.net/mvivekc/GJaDy

代码是 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
    font-family: Georgia;
    height: 80px;
    width: 800px;
     font-family: "Georgia", Geneva  ;
    word-wrap:break-word;
      background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
                zoom: 1;

 }
 .georgiaWithoutTransform{
    font-family: Georgia;
    margin-top: 30px;
    height: 80px;
    width: 800px;
     font-family: "Georgia", Geneva  ;
word-wrap:break-word;
  background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */

 }
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>

无法理解为什么会发生这种情况，并且急需解决此问题。

以下是IE8问题的屏幕截图 - enter image description here

同样在小提琴上发生..问题只在IE上看到，不知道为什么..

请帮忙，提前致谢

Answer 1

我在IE中使用不透明度过滤器时遇到了类似的问题，建议我使用的是2x2图像和背景重复。在您的情况下，您可以尝试相同的宽度为1px，内容高度为图像的高度，并应用所需的渐变。这可能对您没什么帮助，但是，这是上述问题的链接。

P.S：使用图像作为解决方法确实对我有用。

IE Filter Antialiasing problem

Answer 2

好吧，这就是我的想法。过滤器关闭字体中的抗锯齿功能。 You can see a solution offered here. Biziclop创建了一个可以使用的小jQuery脚本has a sample of it working here。这将强制浏览器伪造抗锯齿。

IE上的文字渲染与“渐变”相关联

2 个答案: