Sé que Internet Explorer tiene algunas extensiones propietarias para que pueda hacer cosas como crear divisiones con un fondo degradado. No puedo recordar el nombre del elemento o su uso. ¿Alguien tiene algunos ejemplos o enlaces?Gradiente de colores en Internet Explorer
Mira el CSS personalizado filtra IE puede manejar http://msdn.microsoft.com/en-us/library/ms532847.aspx
Desde ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
El estilo filter debe trabajar para IE8 e IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
Esto no funciona – Webnet
El código que utilizo para todos los gradientes del navegador:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
Tendrá que especificar una altura o zoom: 1 aplicar hasLayout al elemento para que esto funcione en IE.
Actualización:
Aquí es una versión menos Mixin (CSS) para todo lo que los usuarios menos por ahí:
.gradient(@start, @end) {
background: mix(@start, @end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -webkit-linear-gradient(@start, @end);
background: -moz-linear-gradient(top, @start, @end);
background: -ms-linear-gradient(@start, @end);
background: -o-linear-gradient(@start, @end);
background: linear-gradient(@start, @end);
zoom: 1;
}
Perfecto fragmento para degradados. zoom: 1 es la clave para responder esta pregunta. – Voltin
@Blowsie Tengo problemas con los degradados cuando se usa junto con un radio de borde. En eso, el fondo efectivamente cuadra las esquinas. Obviamente, dependiendo del rango de color seleccionado, el fondo llena las esquinas. ¿Hay algún truco para manejar el radio del borde y un degradado de fondo en IE? – codepuppy
@codepuppy Este es un error conocido sin solución, los grandes frameworks como bootstrap han optado por el radio del borde sin gradiente. – Blowsie
Sólo que me gustaría añadir este enlace útil: http://css3please.com/
Muestra cómo obtener pendientes trabajando en todos los navegadores.
Prueba esto:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
IE5? Oh, por favor, no – Ryan
Tenga en cuenta que IE10 apoyará gradientes de la siguiente manera:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Una significativa Gotcha cuando se trata de gradientes en IE es que aunque se puede utilizar filtros de Microsoft .. .
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
... que matan clara tipo en cualquier texto cubierto por el degradado. Dado que el propósito de los gradientes es normalmente hacer que la interfaz de usuario se vea mejor, eso es un obstáculo para mí.
Así que para IE uso una imagen de fondo que se repite en su lugar. Si la imagen de fondo css se combina con el CSS de degradado para otros navegadores (según la respuesta de Blowsie), otros navegadores ignorarán la imagen de fondo a favor del CSS de degradado, por lo que solo se aplicará a IE.
background-image: url('/Content/Images/button-gradient.png');
Hay muchos sitios que puede usar para generar rápidamente un fondo degradado; Yo uso this.
Gran herramienta de Microsoft, le permite examinar los colores en tiempo real y genera CSS para todos los navegadores: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Dos cosas que descubrí mientras luchan con IE 9 gradiente.
-ms-filter no funcionó para mí. Tuve que usar simplemente filter.height: 100% a mi clase para IE para usar el degradado.es posible que desee echarle un vistazo [CSS3Pie] (http://css3pie.com/), que es un script para IE para agregar soporte para algunas características de CSS, incluyendo degradados. Funciona en IE9 también. – Spudley
Una pequeña nota: encontré un pequeño error cuando trabajaba en IE9. Si no deletreas todo el color HEX, no funcionará correctamente. es decir #cccccc NOT #ccc Espero que esto ayude. –
Tenga cuidado al aplicar gradientes a las filas de la tabla. IE parece tratarlos de manera diferente, así que para que funcione alguna de las otras soluciones a esta pregunta, tendrás que envolver tu contenido tr en un div y aplicar el gradiente a eso. – Keith
Creo que está buscando [esta configuración CSS específica] (http://msdn.microsoft.com/en-us/library/ms532997.aspx). – tsilb