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 问题的屏幕截图 --
同样的事情也发生在 fiddle 上..问题只出现在 IE 上,不知道为什么..
请帮忙, 提前致谢
最佳答案
我曾经在 IE 中使用不透明度过滤器时遇到过类似的问题,向我建议的替代方法是使用 2x2 图像和背景重复。在您的情况下,您可以尝试使用 1px 宽度和内容高度作为图像的高度,并应用所需的渐变。这可能对您帮助不大,但是,这是上述问题的链接。
P.S:使用图像作为解决方法对我来说确实很有用。
关于css - 文本渲染在 IE 上被 "gradient"搞砸了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9156731/