IE9 radio de borde y gradiente de fondo sangrado

191

IE9 aparentemente puede manejar esquinas redondeadas mediante el uso de la definición estándar CSS3 de border-radius.

¿Qué pasa con la compatibilidad con el radio del borde y el gradiente de fondo? Sí, IE9 es para admitirlos a ambos por separado, pero si mezcla los dos, el degradado se desangra por la esquina redondeada.

También veo extrañeza con sombras que se muestran como una línea negra sólida debajo de una caja con esquinas redondeadas.

Aquí están las imágenes que se muestran en IE9:

imagen sin sangrado, pero con esquinas afiladas imagen con sangrado

¿Cómo puedo solucionar este problema?

SigmaBetaDiente
fuente
Gracias por los consejos @MikeP y @meanstreakuk. Supongo que la respuesta que estoy buscando es más similar a cuándo IE realmente admitirá gradientes / redondeo o cómo hago que los dos trabajen juntos.
SigmaBetaTooth
Tienes la respuesta de @meanstreak sobre cómo hacer que los 2 trabajen juntos. Si desea ser realista, los gradientes SVG como imágenes de fondo tienen muchas más probabilidades de ser totalmente compatibles con todos los navegadores mucho antes que los gradientes CSS (que todavía están bajo un intenso desarrollo / discusión).
Kevin Peno
29
La increíble MS está muy lejos. Es 2011 e IE todavía está lidiando con este tipo de problemas. zzzzzzz. ..en su sitio dicen: "rápido ahora es hermoso". Claro que lo es. Echa un vistazo a las fotos publicadas arriba. ¡QUE BELLEZA RECTANGULAR!
SunnyRed
SunnyRed, bueno, en Chrome elementos contenidos en algo con esquinas redondeadas sangran sobre las esquinas. Realmente, es 2012 y los navegadores todavía están lidiando con este tipo de problemas :-)
Joey
2
@SunnyRed It 2013 ahora y el error sigue ahí :(
Sliq

Respuestas:

49

Aquí hay una solución que agrega un gradiente de fondo, utilizando un URI de datos para crear una imagen semitransparente que se superpone a cualquier color de fondo. He verificado que está recortado correctamente al radio del borde en IE9. Esto es más liviano que las propuestas basadas en SVG pero, como inconveniente, no es independiente de la resolución. Otra ventaja: funciona con su HTML / CSS actual y no requiere ajuste con elementos adicionales.

Tomé un PNG aleatorio de gradiente de 20x20 a través de una búsqueda en la web y lo convertí en un URI de datos usando una herramienta en línea. El URI de datos resultante es más pequeño que el código CSS para todo ese desorden SVG, ¡mucho menos el propio SVG! (Puede aplicar esto condicionalmente a IE9 solo usando estilos condicionales, clases de CSS específicas del navegador, etc.) ¡Por supuesto, generar un PNG funciona muy bien para gradientes de tamaño de botón, pero no para gradientes de tamaño de página!

HTML:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}
Steve Eisner
fuente
1
Y el ganador es ... Supongo que si tengo que elegir uno, es este. Esperaba ver más información sobre cuándo IE realmente admitiría lo que dice que admite. En cuanto a la solución de imagen de fondo, soy parcial en no tirar de imágenes para que IE se comporte. Gracias a todos por sus útiles sugerencias.
SigmaBetaTooth
1
Encontré que la configuración background-size: 100% 103%; background-position:center;es mejor. 100% para ambos valores agrega un borde extraño en la parte superior e inferior.
Morten Christiansen
Agregar tamaño de fondo: 100% 103%; posición de fondo: centro; no hace nada por mi
Gregory Bolkenstijn
2
¿No está seguro de por qué está utilizando el uri de datos y no solo una imagen? Supongo que una imagen significaría una llamada adicional al servidor para usuarios de ie9, pero tener todos esos caracteres adicionales enviados a navegadores que no sean ie9 parece un desperdicio. La solución está funcionando para mí como imagen, me encantaría la explicación.
señuelo
44
Su URI de datos manual es lo que algunos preprocesadores de CSS hacen normalmente durante el tiempo de implementación. A partir de "pero qué clase de truco feo es ese", eso es una verdadera mierda. SVG es una imagen como cualquier otra, aunque es un vector. Entonces, llamar a SVG un truco, y proponer un PNG en su lugar no tiene sentido. ¿Por qué es mejor SVG? Independencia de resolución, la misma razón por la que usa el radio del borde en lugar del fondo de imagen rasterizada.
skrat
104

También he estado trabajando con este problema. Otra "solución" es agregar un div alrededor del elemento que tiene el gradiente y las esquinas redondeadas. Haga que el div tenga los mismos valores de altura, ancho y esquinas redondeadas. Establezca el desbordamiento en oculto. Esto es básicamente una máscara, pero funciona para mí.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
usuario740128
fuente
3
Esto funciona perfectamente para mí y es mucho más simple que las otras soluciones propuestas.
Simon P Stevens
Mucho más fácil que la respuesta actualmente aceptada. Esto funciona en IE9 para mí.
Andy McCluggage
Esto funciona ... muy triste y patético. ¿Este es el navegador 'HTML5'? ¿Por qué no estoy entusiasmado con IE10?
Todd Vance
@toddv No te preocupes. Todo terminará pronto. No lo suficientemente pronto, pero pronto. Ver daringfireball.net/linked/2012/07/04/windows-hegemony Con suerte, nadie tendrá que preocuparse por admitir IE12 ... tal vez IE14, se vuelve borroso.
jinglesthula
2
Solo una nota menor, pero sus declaraciones de radio de borde deben invertirse para promover la compatibilidad hacia adelante. Hice la edición.
Parris
44

Creo que vale la pena mencionar que, en muchos casos, puede usar una sombra de recuadro para "simular" el efecto de degradado y evitar los bordes feos en IE9. Esto funciona especialmente bien con botones.

Vea este ejemplo: http://jsfiddle.net/jancbeck/CJPPW/31/

Comparación de un estilo de botón con degradado lineal o sombra de cuadro

Jan Beck
fuente
2
Excelente solución en mi caso porque lo usé solo en un botón y necesitaba un degradado como el que dibujaste. box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Usé
Elegante y simple. i ++.
Eliran Malka
1
+1 por pensar fuera de la caja. Funciona extremadamente bien para pestañas y botones. El uso del recuadro mantiene el gradiente dentro del elemento.
GlennG
Esta es la mejor solución que he visto. CSS puro, no requiere elementos adicionales o imágenes.
Zaqx
1
buen truco pero tengo gradientes por todo el sitio. No puedo cambiarlos por estúpidos, es decir.
Mehmet Fatih Yıldız
8

También puede usar CSS3 PIE para resolver este problema:

http://css3pie.com/

Por supuesto, eso podría ser excesivo si solo depende de un solo elemento con esquinas redondeadas y un degradado de fondo, pero es una opción a tener en cuenta si está incorporando una serie de características CSS3 comunes en sus páginas y desea un soporte sencillo para IE6 +

Louis L.
fuente
1
Incluso con css3pie y ie9, no veo el gradiente. Veo las esquinas redondeadas y la sombra paralela, pero no degradado.
Kevin
7

Me encontré con este error también. Mi sugerencia sería usar una imagen de fondo repetida para el gradiente en ie9. IE9 coloca correctamente la imagen en mosaico detrás de los bordes redondeados (a partir de RC1).

No veo cómo escribir 100 líneas de código para reemplazar 1 línea de CSS es simple o elegante. SVG es genial y todo, pero ¿por qué pasar por todo eso cuando las soluciones más fáciles para fondos degradados han existido durante años?

MikeP
fuente
5

También me quedé atrapado en el mismo problema y descubrí que IE no puede representar el radio del borde y el gradiente a la vez, ambos conflictos, la única forma de resolver este dolor de cabeza es eliminar el filtro y usar el gradiente a través del código svg, solo para IE ..

puede obtener el código svg utilizando su código de color degradado, de Microsoft este sitio (especialmente hecho para degradado a svg):

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

disfruta :)

Himanshu Jani
fuente
El enlace ya no es válido.
aplastar
5

Simplemente use un contenedor wrap div (redondeado y desbordamiento oculto) para recortar el radio para IE9. Simple, funciona entre navegadores. SVG, JS y comentarios condicionales 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 */ 
}
Brian Lewis
fuente
4

Esta publicación de blog me ayudó: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-itated-corners/

Básicamente, usa un comentario condicional para eliminar el filtro y luego crea 'sprites' SVG de gradientes que puede usar como imágenes de fondo.

Simple y elegante!

Dan Herd
fuente
Yo vivo esto Especialmente grandes para ayudarme a FINALMENTE mi búsqueda sobre cómo crear sprites usando SVG. Dado que SVG es escalable y los sprites son posibles, encuentro que los paquetes de sprites SVG son mucho más versátiles que los gradientes CSS y, como dije anteriormente, probablemente verán un 100% de soporte en los navegadores mucho antes de los gradientes CSS.
Kevin Peno
Oh, lo único que agregaría a esto es que actualmente webkit y, creo, opera también admiten SVG en url()llamadas de imagen CSS . Solo queda un remanente, por lo tanto, elimine los 1000 condicionales y sirva SVG para el bg en todos los que lo respaldan. Para todos los demás, sirva una imagen rasterizada. Entonces este truco se vuelve manejable.
Kevin Peno
4

IE9 maneja el radio del borde y los gradientes juntos correctamente. El problema es que IE9 hace que el filtro sea adecuado además de del gradiente. La forma de resolver esto correctamente es deshabilitar los filtros en las declaraciones de estilo que utilizan la propiedad de filtro.

Como ejemplo de cómo resolver esto mejor:

Tienes una clase de botón en tu hoja de estilo principal.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

En una hoja de estilo condicional IE9:

.btn { filter: none; }

Siempre que se haga referencia a la hoja de estilo IE9 en su cabeza después de su hoja de estilo principal, esto funcionará perfectamente.

WFendler
fuente
2
ie9 no representa gradientes lineales
James Westgate
3

Hay una manera simple de hacerlo funcionar bajo IE9 con solo UN elemento.

Echa un vistazo a este violín: http://jsfiddle.net/bhaBJ/6/

El primer elemento establece el radio del borde. El segundo pseudo-elemento establece el gradiente de fondo.

Pocas instrucciones clave:

  • el padre debe tener una posición relativa o absoluta
  • padre debe tener desbordamiento: oculto ; (para que el efecto de radio de borde sea visible)
  • :: antes (o :: después) el pseudo-elemento debe tener un índice z: -1 (tipo de solución alternativa)

La declaración del elemento base es algo así como:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Declaración de pseudoelemento:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}
Marakoss
fuente
¡Simplemente perfecto! ¡Gracias! :)
majimekun
Establecí el radio del borde en 20 en su ejemplo, y los bordes no se recortan en IE9
aplastar
Intente configurar esto en su encabezado: <meta http-equiv = "X-UA-Compatible" content = "IE = 9" />
Marakoss
2

Decidí deshabilitar IE9 de las esquinas redondeadas para solucionar este error. Es limpio, fácil y genérico utilizable.

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
llave_
fuente
1

La máscara div en IE9 es una buena idea. Estoy proporcionando un código completo para ayudar a aclarar un poco. Si bien no estoy contento con envolver el botón en un DIV, creo que es más fácil de entender que incrustar una máscara PNG o hacer todo el esfuerzo con SVG. Tal vez IE 10 lo admitirá correctamente.

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
desvalido
fuente
1
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

Me estaba haciendo esto y una vez que quité la línea "filtro:" el sangrado desapareció. Además yo uso pastel.

Sangrados

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

No sangra

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Solución rápida de IE Shadow:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}

Shawn Rebelo
fuente
1

Podría usar shadow para lograr un gradiente, y funcionará en Internet Explorer 9 conborder-radius

Algo como esto:

box-shadow: inset 0px 0px 26px 5px gainsboro;
Rajesh
fuente
0

No estoy seguro de si se trataba de una solución única o válida, pero ...

Descubrí que siempre que el radio del borde sea mayor que el ancho del borde, no encontré el problema. Cuando eran lo mismo, obtenía las esquinas cuadradas.

daddywoodland
fuente
0

Usando brújula y sass puedes lograr esto fácilmente así:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

Brújula generará una imagen SVG para usted.

al igual que:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

raam86
fuente
0

Funciona para mi...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

css

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);

fuente