IE7 和 IE8 中的 CSS 渐变导致文本出现别名答案

【问题标题】：CSS gradients in IE7 & IE8 is causing text to become aliasedIE7 和 IE8 中的 CSS 渐变导致文本出现别名
【发布时间】：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 的一个已知问题。

标签： css text internet-explorer gradient

【解决方案1】：

用 DIV 包装内容，然后将其添加到 DIV 的 css 样式中...

position: relative;

http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html

【讨论】：

【解决方案2】：

我找到了另一种便宜（有点不透明）的解决方案。当包装文本节点并将每个元素设置为相对位置时，文本再次变为反锯齿。不要问为什么...

假设：

<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/

【讨论】：

【解决方案3】：

我有一种情况，我希望文本区域的背景是某些颜色，水平渐变为白色，并在 CSS 中由十六进制定义。我想避免制作彩色背景图像，以防我公司的非开发人员想要添加仅包含十六进制的新颜色。

我找到的解决方案是将白色渐变的 24 位 PNG 设置为透明设置为我正在制作的区域的宽度。

然后我使用这个仅限 IE 的 hack 来让 CSS 呈现我选择的背景颜色，该颜色逐渐变为白色：

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;

（黑客可以改进，但它适用于我，包括 IE9）

【讨论】：

【解决方案4】：

是的，IEx 有问题。

尝试使用纯色背景色：

/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc

现在，不需要使用表达式“...填充重复的背景图像”，因为使用背景图像并重复它没有任何问题，我们应该庆幸我们不能只能这样做，但我们可以在 X 和 Y 中重复它。

当然，你想让你的重复背景图像尽可能高效，所以让它变小/变薄（取决于你的设计）并使用它，请放心，你没有做错任何事情或违反任何标准或最佳实践。

【讨论】：

嗯，你的 CSS 示例有点乱 - 但你的情绪很好。
一团糟？就在一条线上，效率更高。我不再单独写了，那个方法占用了太多空间，上下滚动很累。
我所说的混乱是指“完全无效的 CSS 语法，在任何浏览器中都不起作用”。

【解决方案5】：

您可以尝试使用 IE css 3 html 组件，例如 PIE (http://css3pie.com,)，它在渲染渐变方面做得相当不错。（虽然这本质上是使用 javascript）

【讨论】：

这实际上是 CSSpie 的失败 :( 这就是把我带到这里的原因。

【解决方案6】：

对于这个问题没有好的解决方案。

更糟糕的是：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 渲染文本。（假设您的网站使用的字体允许嵌入字体。）

【讨论】：

【解决方案7】：

这可能算不上优雅（或有效）的解决方案，但是在 IE 中使用 Cufón 怎么样？

【讨论】：