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 年后，我认为这个错误会被修复，但事实并非如此。有没有办法在 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. 只需回退到 IE 中纯色 background-color 并继续您的生活。 (确保将 background 规则放在 first 中，以便 FF 和 Webkit 安全地覆盖/忽略它。)

2. 在 IE 中使用 background-image。 (再次将该 CSS 规则放在第一个)

3. 继续使用渐变 hack，简单地“接受”并接受 IE 的锯齿状文本。

4. 使用 Javascript(或 IE 专有的 CSS expression() 语法)注入(inject)一个空元素，对其应用渐变并将其放在文本后面。

   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 呈现的文本替换锯齿状的文本。 (假设您的网站使用的字体允许嵌入字体。)