2012-02-06 59 views
1

RGBA - 解决方法是IE“DXImageTransform.Microsoft.gradient”;实测值由www.css3please.com跨浏览器透明度提供一个方便的工具,但应用这种梯度在IE浏览器(IE8) - 的作品,但文本失去其清晰度/清晰度文本呈现在IE螺合“梯度”

应用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浏览器,不知道为什么..

请帮帮忙, 在此先感谢

+0

只是想补充,在FF/Chrome/safari上没有看到这个问题..只有在ie .. – 2012-02-06 07:12:26

+0

您可能想要添加正确的示例。 (http://jsfiddle.net) – Joonas 2012-02-06 09:05:10

+0

@lollero已经更新了代码,以便为您和其他人更好地查看我的问题,请在IE中检查小提琴以查看我的问题(应用渐变的文本渲染) - 检查小提琴在这里.. http://jsfiddle.net/mvivekc/GJaDy/ ..任何帮助表示赞赏.. – 2012-02-06 09:43:35

回答

0

我有一个与IE中的不透明度过滤器相似的问题,建议我的替代方案是使用2x2图像和背景重复。在你的情况下,你可以用1px的宽度和内容高度作为你的图像的高度,并应用所需的渐变。这可能对你没有多大帮助,但是,这里是上述问题的链接。

P.S:使用图像作为解决方法确实对我来说就像是一种魅力。

IE Filter Antialiasing problem

+0

谢谢,我会保持这种最后的手段..似乎使用图像是每个愚蠢的IE问题的唯一解决方法.. – 2012-02-06 10:45:37

+0

是的,我经历了相同的。如果您找到解决方法,请更新! – 2012-02-06 10:51:00

0

好吧,这就是我的想法发生了什么。过滤器关闭字体中的消除锯齿。 You can see a solution offered here. Biziclop创建了一个可以使用的小型jQuery脚本和has a sample of it working here。这将迫使浏览器伪造消除锯齿。

+0

检查答案,使用普通的JS ..有没有办法我可以用普通的JS包装它? – 2012-02-07 14:15:45

+0

另外,他提到它的v内存饥饿的方法 - 你会建议使用它吗?或者,有没有其他方式来实现相同? – 2012-02-07 14:17:39

+0

说实话,我不打扰试图在IE上支持rgba。我只是确保它会优雅地退化并继续前进。我设法让客户和同事了解,在每个浏览器中,页面不必相同。我见过的唯一的其他解决方案就是Brutallus提到的那个。对不起,我不能有更多的帮助。 – 2012-02-07 15:02:14