文本渲染在 IE 上被“渐变”搞砸了
Posted
技术标签:
【中文标题】文本渲染在 IE 上被“渐变”搞砸了【英文标题】：text rendering is screwed with "gradient" on IE 【发布时间】：2012-02-27 17:28:56 【问题描述】：RGBA -- IE 的解决方法是“DXImageTransform.Microsoft.gradient”。找到 www.css3please.com 提供的handy tool 用于跨浏览器透明度，但在 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 问题的屏幕截图 --
同样的情况也发生在小提琴上..问题只在 IE 上看到，不知道为什么..
请帮忙， 提前致谢
【问题讨论】：
只是想补充一下，这个问题在 FF/Chrome/safari 上看不到.. 仅在 ie 上.. 您可能想添加一个适当的例子来说明正在发生的事情。 (jsfiddle.net) @lollero 已更新代码以让您和其他人更好地了解我的问题，请检查 IE 中的小提琴以查看我的问题（应用渐变时的文本渲染）- 在此处检查小提琴.. jsfiddle.net/mvivekc/GJaDy .. 任何帮助表示赞赏.. 小提琴中的渐变不存在。您已指定与开始和结束颜色相同的颜色。此外，十六进制值应该只有 6 个字符，而不是 8 个。 @Alexmorales 试图获得跨浏览器的透明度，ieRgba 的 IE 解决方法.. 如链接中提到的，我还包括（www.css3please.com）.. 就是没有渐变。 . 并将颜色设置为适当的十六进制并不会改变任何内容——文本仍然受到干扰.. 【参考方案1】：我曾经在 IE 中使用不透明滤镜时遇到过类似的问题，向我建议的替代方法是使用 2x2 图像和背景重复。在您的情况下，您可以尝试使用 1px 宽度和内容高度作为图像的高度，并应用所需的渐变。这可能对您没有多大帮助，但这里是上述问题的链接。
P.S ：使用图像作为解决方法对我来说确实很有魅力。
IE Filter Antialiasing problem
【讨论】：
谢谢，我会把它作为最后的手段。似乎使用图像是解决每个愚蠢的 IE 问题的唯一解决方法.. 是的，我也经历过同样的事情。如果您确实找到了解决方法，请更新！【参考方案2】：好吧，这就是我认为正在发生的事情。过滤器关闭字体中的抗锯齿。 You can see a solution offered here. Biziclop 创建了一个您可以使用的小型 jQuery 脚本和has a sample of it working here。这将强制浏览器伪造抗锯齿功能。
【讨论】：
检查了答案，使用纯 js.. 有没有办法用纯 JS 包装它？？ 另外，他提到它是一种消耗内存的方法——你会建议使用它吗？？...或者，有没有其他方法可以达到同样的效果？？ 说实话，我不会费心尝试在 IE 上支持 rgba。我会确保它优雅地降级并继续前进。我设法让客户和同事明白，页面不必在每个浏览器中看起来都相同。我见过的唯一其他解决方案是 Brutallus 提到的那个。抱歉，我无法提供更多帮助。 谢谢，搜索了--没有找到文章..猜这个问题没有解决方法..接受Brutallus的回答..以上是关于文本渲染在 IE 上被“渐变”搞砸了的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer (IE) 中的 JQuery 圆角搞砸了