IE9 borde-radio y fondo degradado sangrado

IE9 aparentemente es capaz de manejar esquinas redondeadas usando la definición estándar de CSS3 de border-radius .

¿Qué pasa con el soporte para el radio de la frontera y el gradiente de fondo? Sí IE9 es compatible con ambos por separado, pero si mezcla los dos, el gradiente sangra fuera de la esquina redondeada.

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

Estas son las imágenes que se muestran en IE9:

imagen sin sangrado, pero esquinas agudasimagen con sangrado

¿Cómo puedo solucionar este problema?

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

Agarré un PNG de gradiente aleatorio de 20×20 a través de una búsqueda 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 de SVG, mucho menos el mismo SVG. (Puede aplicar esto condicionalmente a IE9 solo con estilos condicionales, clases de CSS específicas del navegador, etc.) Por supuesto, generar un PNG funciona muy bien para degradados de tamaño de botón, ¡pero no para degradados de tamaño de página!

HTML:

 This is a button 

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; } 

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

HTML:

 
Content

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 */ } 

Creo que vale la pena mencionar que, en muchos casos, puede usar una sombra de cuadro insertada para “falsificar” 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 sombreado de caja

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

http://css3pie.com/

Por supuesto, eso podría ser exagerado si solo dependes de un solo elemento con esquinas redondeadas y un degradado de fondo, pero es una opción a considerar si estás incorporando una cantidad de características comunes de CSS3 en tus páginas y quieres un soporte fácil. para IE6 +

Me encontré con este error también. Mi sugerencia sería usar una imagen de fondo repetida para el gradiente en ie9. IE9 azuleja correctamente la imagen 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 sencillas para fondos degradados han existido durante años?

También me quedé atrapado en el mismo problema y encontré que IE no puede renderizar 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 degradado a través del código svg. solo para IE …

puedes obtener el código svg usando su código de color de degradado, de Microsoft este sitio (especialmente creado para gradiente a svg):

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

disfrutar 🙂

Solo usa un div envoltura (redondeado y desbordado oculto) para recortar el radio para IE9. Simple, funciona en todos los navegadores. SVG, JS y los comentarios condicionales son innecesarios.

 
text or whatever
.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 */ }

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

Básicamente, utiliza un comentario condicional para eliminar el filtro y luego crea “sprites” SVG de degradados que puede usar como imágenes de fondo.

Simple y elegante!

IE9 maneja correctamente el radio de borde y los degradados. El problema es que IE9 representa el filtro adecuado además del degradado. La forma de resolverlo correctamente es deshabilitar los filtros en las declaraciones de estilo que utilizan la propiedad de filtro.

Como ejemplo de cómo resolver mejor esto:

Tienes una clase de botón en tu hoja de estilos 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 IE9 condicional:

 .btn { filter: none; } 

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

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. Segundo pseudo-Elemento establece el degradado de fondo.

Pocas instrucciones clave:

  • el padre debe tener una posición relativa o absoluta
  • el padre debe tener desbordamiento: oculto ; (para que el efecto border-radius sea visible)
  • :: pseudo-elemento before (or :: after) debe tener z-index: -1 (tipo de solución)

La statement 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 pseudo-elemento:

 .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 ); } 

Decidí desactivar IE9 de redondear las esquinas 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); } 

La máscara div en IE9 es una buena idea. Estoy suministrando un código completo para ayudar a aclarar un poco. Aunque no estoy contento con colocar el botón en una DIV, creo que es más fácil de entender que insertar una máscara PNG o hacer todo el esfuerzo usando SVG. Quizás IE 10 lo soportará adecuadamente.

    Button Test    
 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 eliminé la línea de “filtro:” desapareció el sangrado. Además, uso PIE.

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 instantánea de sombra de IE:

 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(' ')); } }); } 

}

Podría usar shadow para lograr gradiente, y va a funcionar en Internet Explorer 9 con border-radius

Algo como esto:

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

No estoy seguro si esto fue 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 iguales estaba obteniendo las esquinas cuadradas.

Con el uso de brújula y sass, puedes lograrlo fácilmente de la siguiente manera:

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

Compass 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; 

}

Funciona para mi…