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

Question

我试图在包含一些文本的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中填充重复的背景图像？

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

<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中的文本是别名(锯齿状),而段落中的文本不是.

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

Answer 1

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

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

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

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

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

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

3. 继续使用渐变黑客,简单地"吮吸"并接受IE的锯齿状文本.

4. 使用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);
   }
   

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

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

Answer 2

这可能算不上优雅（或有效）的解决方案，但是对于 IE使用Cuf\xc3\xb3n怎么样？

\n