IE7&CSS中的CSS渐变IE8导致文本变为别名 [英] CSS gradients in IE7 & IE8 is causing text to become aliased

问题描述

我试图在包含一些文本的div中使用CSS渐变。使用Gecko和Webkit，文本显示正常。在IE7& IE8文本显示为别名（jaggy）。

我碰到这个博客说：我们决定在使用任何DXTransform的元素上禁用ClearType。 b
$ b

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>正常文字< / p> 
  

在IE中，div中的文本是别名（jaggy），段落中的文本是不。

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

解决方案

这个问题没有好的解决方法。

更糟糕的是： progid：DXImageTransform.Microsoft.gradient 是可怕的bug，所以鼠标事件（悬停，点击等）通过它通过它 - 点击这样的元素也触发一个分离点击无论哪个元素恰好是它后面的位置。注意！

无论如何，您最好先考虑哪些备用/解决方法/ NastyHacks感觉可以接受。

是我的头脑中的几个想法 - 按照我的个人喜好：

1. 固体 background-color 在IE和继续与你的生活。 （请务必先放置后台规则，以便FF和Webkit安全覆盖/忽略它。）




2. 在IE中使用 background-image 。 （再次将CSS规则放在 ）



3. 继续使用渐变黑客，




4. 使用Javascript（或IE的专有CSS expression（）语法）

     div {
    background：-moz-线性梯度（top，#fff，#ddd）; 
    background：-webkit-gradient（linear，left top，left bottom，from（#fff），to（#ddd））; 
    behavior：expression（jQuery（this）.wrapInner（'< div class =ie-wrap/>'）。prepend（'< div class =ie-gradient/> ; this.runtimeStyle.behaviour ='none'）; / *禁用重复运行* / 
    position：relative; 
   } 
    div divieie-wrap {
    position：relative; 
   } 
    div divie-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渲染文本替换锯齿状文本。 （假设您的网站使用允许字体嵌入的字体。）

I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).

I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".

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

That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?

Here's an example of what I mean.

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

In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.

Any solution that doesn't involve images would be greatly appreciated.

解决方案

There's no good solution to this problem.

Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!

Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.

Here are a few ideas off the top of my mind - in order of my personal preference:

1. Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)

2. Use a background-image in IE. (Again place that CSS rule at first)

3. Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.

4. use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.

   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);
   }
   

   (Warning: above code is untested pile of crap. and will probably not work as is.)

5. Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)

这篇关于IE7&CSS中的CSS渐变IE8导致文本变为别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！