IE7 和 IE8 中的 CSS 渐变导致文本出现别名
Posted
技术标签:
【中文标题】IE7 和 IE8 中的 CSS 渐变导致文本出现别名【英文标题】：CSS gradients in IE7 & IE8 is causing text to become aliased 【发布时间】：2011-01-31 00:40:00 【问题描述】：我正在尝试在包含一些文本的 div 中使用 CSS 渐变。使用 Gecko 和 Webkit，文本显示良好。在 IE7 和 IE8 中，文本显示为别名（锯齿状）。
我看到这个博客说：“我们决定在使用任何 DXTransform 的元素上禁用 ClearType”。
IE 博客： http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
那是在 2006 年； 3.5 年后，我认为这个错误会被修复，但事实并非如此。有没有办法在 IE8 中做到这一点，而无需在 div 中填充重复的背景图像？
这是我的意思的一个例子。
<style>
div
height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
</style>
<div>Hello World</div>
<p>Normal text</p>
在 IE 中，div 中的文本有别名（锯齿状），而段落中的文本则没有。
任何不涉及图像的解决方案将不胜感激。
【问题讨论】：
我不知道有任何解决方案，正如您所发现的那样，多年来它一直是 IE 的一个已知问题。 【参考方案1】：这可能算不上优雅（或有效）的解决方案，但是在 IE 中使用 Cufón 怎么样？
【讨论】：
【参考方案2】：是的，IEx 有问题。
尝试使用纯色背景：
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
现在，不需要使用表达式“...填充重复的背景图像”，因为使用背景图像并重复它没有任何问题，我们应该庆幸我们不能只能这样做，但我们可以在 X 和 Y 中重复它。
当然，你想让你的重复背景图像尽可能高效，所以让它变小/变薄（取决于你的设计）并使用它，请放心，你没有做错任何事情或违反任何标准或最佳实践。
【讨论】：
呃，你的 CSS 示例有点乱——但你的情绪很好。 一团糟？就在一条线上，效率更高。我不再单独写了，那个方法占用了太多空间，上下滚动很累。 我所说的混乱是指“完全无效的 CSS 语法，在任何浏览器中都不起作用”。【参考方案3】：对于这个问题没有好的解决方案。
更糟糕的是：progid:DXImageTransform.Microsoft.gradient 有很多错误，因此鼠标事件（悬停、点击等）会通过它向右传递——点击这样的元素也会触发 单独 em> 单击恰好位于其后面位置的任何元素。当心！
无论如何，您最好开始考虑您认为可以接受哪些后备/解决方法/NastyHacks。
以下是我脑海中的一些想法 - 按照我的个人喜好排列：
只需在 IE 中退回到一个普通的 background-color 并继续你的生活。 （确保将 background 规则放在 first 上，以便 FF 和 Webkit 安全地覆盖/忽略它。）
在 IE 中使用 background-image。 （再次将 CSS 规则放在 first）
继续使用渐变 hack，简单地“接受”并接受 IE 的锯齿状文本。
使用 javascript（或 IE 专有的 CSS expression() 语法）注入一个空元素，对其应用渐变并将其置于文本后面。
div
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
position: relative;
div div.ie-wrap
position: relative;
div div.ie-gradient
position: absolute;
top: 0;
left: 0;
width: 100%;
height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
（警告：上面的代码是未经测试的一堆废话。可能无法正常工作。）
继续使用渐变 hack 并使用 Cufon 将锯齿状文本替换为 VML 渲染文本。 （假设您的网站使用的字体允许嵌入字体。）
【讨论】：
【参考方案4】：您可以尝试使用 IE css 3 html 组件，例如 PIE (http://css3pie.com,)，它在渲染渐变方面做得相当不错。 （虽然这本质上是使用 javascript）
【讨论】：
这实际上是 CSSpie 的失败 :( 这就是把我带到这里的原因。【参考方案5】：我有一种情况，我希望文本区域的背景是某些颜色，水平渐变为白色，并在 CSS 中由十六进制定义。我想避免制作彩色背景图像，以防我公司的非开发人员想要添加仅包含十六进制的新颜色。
我找到的解决方案是将白色渐变的 24 位 PNG 设置为透明设置为我正在制作的区域的宽度。
然后我使用这个仅限 IE 的 hack 来让 CSS 呈现我选择的背景颜色，该颜色逐渐变为白色：
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;
（hack 可以改进，但它对我有用，包括 IE9）
【讨论】：
【参考方案6】：用 DIV 包装内容，然后将其添加到 DIV 的 css 样式中...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
【讨论】：
【参考方案7】：我找到了另一种廉价（有点不透明）的解决方案。当包装文本节点并将每个元素设置为相对位置时，文本再次变为反锯齿。不要问为什么...
假设：
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued
position: relative;
.gradient
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
希望对任何人都有帮助。在这种情况下，没有必要使用背景图片或衍生产品。
jsfiddle 中的工作示例：http://jsfiddle.net/SLZpE/2/
【讨论】：
以上是关于IE7 和 IE8 中的 CSS 渐变导致文本出现别名的主要内容，如果未能解决你的问题，请参考以下文章
在 IE9 中使用 CSS3 PIE 的线性渐变不起作用，IE8 可以