IE7和IE8中的CSS渐变导致文本变为别名

我试图在包含一些文本的div中使用CSS渐变.使用Gecko和Webkit,文本显示正常.在IE7和IE8中,文本显示为别名(锯齿状).

我看到这篇博客说:"我们决定在使用任何DXTransform的元素上禁用ClearType".

IE博客:http: //blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

那是在2006年; 3.5年后,我认为这个bug会被修复,但事实并非如此.有没有办法在IE8中执行此操作而不需要在div中填充重复的背景图像？

这是我的意思的一个例子.

Hello World
Normal text

在IE中,div中的文本是别名(锯齿状),而段落中的文本不是.

任何不涉及图像的解决方案都将非常感激.

这个问题没有很好的解决方案.

更糟糕的是:progid:DXImageTransform.Microsoft.gradient可怕的马车,因此鼠标事件(悬停,点击等)直接通过它 - 点击这样一个元素也会触发单独点击其背后的任何元素.谨防!

无论如何,你最好开始考虑哪些后备/变通办法/ NastyHacks让你觉得可以接受.

以下是我的一些想法 - 按照我的个人喜好排列:

只是background-color在IE中恢复平稳,继续你的生活.(请务必地方,background规则首先为它能够安全地重写/执行FF和Webkit忽略).

background-image在IE中使用.(同样发生在该CSS规则第一)

继续使用渐变黑客,简单地"吮吸"并接受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('
').prepend('
'); 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.px" );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}

(警告:上面的代码是未经测试的一堆废话.并且可能不会按原样运行.)

继续使用渐变黑客并使用Cufon用VML渲染文本替换锯齿状文本.(基于您的网站使用允许字体嵌入的字体的假设.)