Los degradados de CSS en IE7 e IE8 están causando que el texto tenga un alias

Question

Estoy intentando utilizar un degradado de CSS en un div que contiene algo de texto. Con Gecko y Webkit, el texto se muestra bien. En IE7 & IE8, el texto aparece con alias (irregular).

Me encontré con este blog que dice: "decidimos desactivar ClearType en los elementos que utilizan cualquier DXTransform".

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

Eso fue en 2006; 3.5 años después, supongo que este error se solucionará, pero no es así. ¿Hay alguna manera de hacer esto en IE8 sin recurrir al relleno de una imagen de fondo repetitiva en el div?

Aquí hay un ejemplo de lo que quiero decir.

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

En IE, el texto en el div tiene un alias (dentada), y el texto en el párrafo no es.

Cualquier solución que no involucre imágenes sería muy apreciada.

Answer 1

Esto puede no contar como una solución elegante (o de trabajo), pero ¿qué tal el uso de Cufón para IE?

Answer 2

Sí, eso es un problema con IEx.

Trate de usar un color de fondo sólido:

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

Ahora, no hay necesidad de usar la expresión "... el relleno de una imagen de fondo que se repite", ya que no hay nada malo en usar una imagen de fondo y repita Deberíamos estar agradecidos de que no solo podemos hacer eso, sino que podemos repetirlo en X e Y.

Por supuesto, desea que su imagen de fondo repetitiva sea lo más eficiente posible, por lo tanto, haga que sea pequeña/delgada (dependiendo de su diseño) y úsela, puede estar seguro de que no está haciendo nada incorrecto o en contra de cualquier sta ndards o mejores prácticas.

Answer 3

No hay buena solución a este problema.

Peor aún: progid:DXImageTransform.Microsoft.gradient está libre de errores terriblemente por lo que los eventos de ratón (flotar, haga clic, etc.) pasan directamente a través de ella - un clic en un elemento tan también desencadena una independiente, haga clic en el que sea elemento que pasa a ser puestos Detrás de eso. ¡Tener cuidado!

De todos modos, es mejor que empieces a considerar qué soluciones/soluciones alternativas/NastyHacks te parecen aceptables.

Aquí están algunas ideas de la parte superior de la cabeza - con el fin de mi preferencia personal:

1. Sólo repliegue a una maciza natural background-color en IE y seguir adelante con su vida. (Asegúrese de colocar esa regla backgroundprimera para que pueda ser anulado/ignorado por FF y Webkit segura.)

2. Utilice un background-image en IE.(Vuelva a colocar esa regla CSS en primero)

3. Siga usando el hack degradado y simplemente 'adáptelo' y acepte el texto irregular para IE.

4. utilice Javascript (o la sintaxis CSS expression()) para inyectar un elemento vacío, aplicarle el degradado y colocarlo detrás del texto.

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

   (Advertencia: el código anterior es la pila no probado de basura y probablemente no funciona como es..)

5. seguir usando el truco del gradiente y utilizar Cufon para reemplazar el texto de dentado con VML rendido texto. (Descansa en el supuesto de que su sitio está utilizando un tipo de letra que permita font-incrustación.)

Answer 4

Usted podría tratar de usar un CSS 3 componente IE html, como el pastel (http://css3pie.com,), que hace un trabajo bastante decente de gradientes de representación. (Aunque esto es esencialmente usando javascript)

Answer 5

Tuve una situación en la que quería que los fondos de las áreas de texto fueran ciertos colores que se desvanecen horizontalmente en blanco y se definen por hexadecimal en CSS. Quería evitar hacer imágenes de fondo de color en caso de que un miembro no desarrollador de mi empresa quisiera agregar un nuevo color con solo hexadecimal.

La solución que encontré fue hacer una PNG de 24 bits de gradiente blanco en un conjunto transparente al ancho del área que estaba haciendo.

entonces utilizaron este IE sólo truco para conseguir el CSS para hacer que un color de fondo de mi elección que se desvanece a blanco:

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

(el hack se puede mejorar, pero funciona para mí, incluyendo IE9)

Answer 6

Wrap el contenido con un DIV a continuación, añadir esto a estilo css del DIV ...

position: relative; 

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

Answer 7

Encontré otra solución económica (poco opaca). El texto vuelve a ser antializado de nuevo, al envolver el nodo de texto y establecer cada elemento en posición relativa. No preguntes por qué ...

Asumamos:

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

Esperanza que ayuda a alguien por ahí. En este caso, no es necesario usar imágenes de fondo o derivadas.

Ejemplo de trabajo en jsFiddle: http://jsfiddle.net/SLZpE/2/