gradiente lineal utilizando CSS3 PIE en IE9 no funciona, IE8

Question

He decidido dejar completamente de soporte para IE6 e IE7 en mi sitio web, redirigiendo a los usuarios a una página de advertencia de solo texto. Sin embargo, todavía soporto IE8 e IE9.

Estoy logrando esto usando CSS3 PIE, y border-radius funciona en ambos (IE8/9), box-shadow trabaja en ambos, sin embargo también dependo de gradiente lineal. Tengo montones de etiquetas en uso para lograr esto:

background: #E6E6E6; /* fallback */ 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */ 
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */ 
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */ 
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */ 
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */ 
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */ 
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */ 
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */ 

behavior: url(/PIE.htc); /* load PIE.htc */ 

lineal gradiente funciona en IE8, IE9, pero no, por extraño. He intentado todas las soluciones que he encontrado, pero no han funcionado. IE8 simplemente muestra la reserva: fondo: # E6E6E6; - no es un degradado.

no creo que sea nada malo con el servidor o algo por el estilo, porque las otras propiedades - la frontera de radio y box-shadow - trabajo con PIE pero no sin.

Tengo todas las propiedades para trabajar en todos los navegadores que apoyo -? No IE9 :(

Cualquier idea
, gracias

Answer 1

Bien, aquí está mi solución. Ciertamente no es bonito, pero funciona.

<style type="text/css"> 
body{ 
    background: #E6E6E6; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); 
    background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -moz-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -ms-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -o-linear-gradient(#E6E6E6, #B3BCC7); 
    background: linear-gradient(#E6E6E6, #B3BCC7); 
    -pie-background: linear-gradient(#E6E6E6, #B3BCC7); 

    behavior: url(/PIE.htc); 
} 
</style> 

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]--> 

EDIT: Si alguien los quiere, PIE.htc se encuentra en http://www.css3pie.com y ie9-gradient-fix.htc se encuentra en http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. No pude hacer que ie9-gradient-fix.htc funcione, a menos que estuviera en el directorio raíz, PIE.htc funcionó en mi directorio/resources /.

Answer 2

no creo que sea nada malo con el servidor o algo por el estilo, porque las otras propiedades --radio-frontera y la caja de sombra - de trabajo con la empanada pero no sin

PIE no hace que la frontera de radio y caja-sombra en IE9 desde IE9 sup. puertos ambos de forma nativa. Entonces su presencia no es una indicación de que PIE esté funcionando.

Supongo que su PIE.htc recibe el encabezado de tipo de contenido incorrecto, IE9 es particularmente estricto con respecto al tipo de contenido. Vea http://css3pie.com/documentation/known-issues/#content-type para más detalles.

Answer 3

¡Genial! ¡utilicé PIE.php y corrigí este error (gradiente lineal + radio de borde) en IE8, IE9!

Para usarlo, simplemente asegúrese de que tanto PIE.php y PIE.htc están en el mismo directorio, y luego en su punto de CSS el comportamiento al archivo PHP en su lugar:

comportamiento: url (PIE .php);

Answer 4

ie9-gradient-fix.htc trabajado para mí en I.E. 9 pero luego cambiando el comportamiento de pie.htc a pie.php TAMBIÉN hace lo mismo.

Las ruedas giran oh tan lentamente en Microsoft pero parece que también pueden girar en direcciones opuestas?

Answer 5

Tenía un gran dolor de cabeza porque incluso con el encabezado de tipo de contenido correcto (texto/componente x), el gradiente lineal no funcionaba en IE9.

La actualización a PIE 2.0 ha resuelto el problema.

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

Answer 6

En mi caso yo estaba usando <!--[if lt IE 9]>, cambiándolo a <!--[if lt IE 10]> fijo mi problema (de no incluir podía comprender mi archivo CSS IE).

Creo que ** <!--[if lte IE 9]> haría la misma lógica.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0); 

PS. No estoy usando css3pie en absoluto (pensé que era, derp)