css - svg fallback
Los degradados de CSS en IE7 e IE8 están causando que el texto se vuelva un alias (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 que...
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>
Espero que ayude a cualquiera 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/
Estoy intentando usar un degradado de CSS en un div que contiene algo de texto. Con Gecko y Webkit, el texto se muestra bien. En IE7 e IE8, el texto aparece con alias (irregular).
Encontré este blog diciendo: "decidimos desactivar ClearType en elementos que usan 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 es aliasado (irregular) y el texto en el párrafo no.
Cualquier solución que no involucre imágenes sería muy apreciada.
Envuelve el contenido con un DIV luego agrega esto al estilo css del DIV ...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
Esto puede no contar como una solución elegante (o funcional), pero ¿qué hay de usar Cufon para IE?
No hay una buena solución para este problema.
Peor aún: progid:DXImageTransform.Microsoft.gradient tiene errores horribles, por lo que los eventos del mouse (hover, click, etc.) pasan directamente a través de él; un clic en dicho elemento también desencadena un clic por separado en cualquier elemento que esté detrás de él. . ¡Tener cuidado!
De todos modos, es mejor que comiences a considerar qué soluciones / soluciones alternativas / NastyHacks te parecen aceptables.
Aquí hay algunas ideas fuera de mi mente, en orden de mi preferencia personal:
Solo retrocede a un color de
background-colorsólido en IE y sigue con tu vida. (Asegúrese de colocar esa regla debackgroundprimero para que FF y Webkit lo sobrescriban / ignoren).Usa una
background-imageen IE. (Coloque nuevamente esa regla de CSS al principio )Siga usando el hack de gradiente y simplemente ''adquiera'' y acepte el texto irregular para IE.
use Javascript (o la sintaxis CSS
expression()IE) para inyectar un elemento vacío, aplique el degradado y colóquelo 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 una pila de basura no probada y probablemente no funcionará como está).
Sigue usando el hack degradado y utiliza Cufon para reemplazar el texto Cufon con texto renderizado VML. (Se basa en la suposición de que su sitio utiliza un tipo de letra que permite la inserción de fuentes).
Puede intentar usar un componente css 3 html de IE, como PIE ( http://css3pie.com ), que hace un trabajo bastante decente de renderizar degradados. (Aunque esto es esencialmente usar javascript)
Sí, ese es un problema con IEx.
Intente 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 es necesario usar la expresión "... rellenando una imagen de fondo que se repite" , ya que no hay nada de malo en usar una imagen de fondo y repetirla, debemos estar agradecidos de que no solo podemos hacer eso, sino que podemos repetirlo en X y Y.
Por supuesto, desea que su imagen de fondo repetitiva sea lo más eficiente posible, por lo tanto, hágalo pequeño / delgado (según su diseño) y úselo, puede estar seguro de que no está haciendo nada incorrecto o en contra de cualquier estándar o mejores prácticas.
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 un PNG de 24 bits de gradiente blanco en un conjunto transparente al ancho del área que estaba haciendo.
Luego utilicé este truco de solo IE para obtener el CSS para renderizar 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 truco podría mejorarse, pero funciona para mí, incluido IE9)