IE9 Esquinas redondeadas y degradados de fondo CSS ¿Vivir juntos?

Question

Me encontré con algo raro en IE9 tratando de obtener una gradiente de fondo para mostrar.

Básicamente estoy aplicando varias clases a un objeto contenedor.

<div class="gradient corners"></div> 

Usando este CSS.

.gradient { 
background-color: #96A7C5; 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.19, #6C86AD), 
color-stop(0.6, #96A7C5) 
); 
background-image: -moz-linear-gradient(
center bottom, 
#75A33A 19%, 
#8DC447 60% 
); 

.corners { 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
} 

Para obtener el degradado en IE, aplico el filtro de basura a mi clase .gradient.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A'); 

Con eso, el degradado funciona pero mis esquinas redondeadas desaparecen.

Intenté poner un condicional para la declaración del filtro.

<!--[if IE]> 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A'); 
<![endif]--> 

Eso me devuelve las esquinas, pero el gradiente desaparece.

Answer 1

Gradiente saldrá para las esquinas redondeadas en IE9, por lo la mejor solución por el momento para agregar uno div extra:

<div class="corners"><div class="gradient"></div></div> 

y ocultar el desbordamiento de .corners

.corners { 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 

overflow: hidden; 
} 

Recomiendo esta herramienta Photoshop-como para la creación de gradientes entre navegadores: http://www.colorzilla.com/gradient-editor/

Y éste para crear la frontera de radio: http://border-radius.com/

Answer 2

no necesita el bloque if IE.

simplemente ponga las 3 reglas (4 si incluye ambas IEs) en la declaración de estilo, los navegadores solo recogerán las que entiendan.

un ejemplo:

.gradient { 
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */ 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */ 
} 

También hay que señalar que los gradientes en IE sólo funcionarán si el elemento hasLayout (Ver: http://reference.sitepoint.com/css/haslayout)

Answer 3

esquinas redondeadas y filtro no van juntos. para IE, siempre incluyo http://css3pie.com y lo uso para hacer border-radius y degradados en IE. una css muestra se ve así:

.someElement { 
    behavior: url(assets/js/PIE.htc); 
    border-radius: 10px; 
    background: #8cb2d1; 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
    background: -moz-linear-gradient(top, #8cb2d1 0%, #4080b3 42%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3)); 
    background: -webkit-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); 
    background: -o-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); 
    background: -ms-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); 
    background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%); 
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%); 
} 

Los pasos:

1. incluyen PIE.htc vía comportamiento
2. añadir radio de frontera como de costumbre (la frontera de radio: 10px;)
3. añadir el atributo especial -pie-background: (-pie-background: linear-gradient (arriba, # 8cb2d1 0%, # 4080b3 42%);)

Answer 4

Este es un trabajo bastante sólido para el problema de gradientes IE9 frente a esquinas. Utiliza js para generar un SVG sobre la marcha, y es rápido.

http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/

Answer 5

sólo tiene que utilizar un div envoltura (redondeado & desbordamiento oculta) para recortar el radio para IE9. Simple, funciona en todos los navegadores. SVG o JS son innecesarios.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div> 

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
} 
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}