Soporte para "border-radius" en IE

158

¿Alguien sabe si / cuándo Internet Explorer admitirá el atributo CSS "border-radius"?

internet-explorer css

— Tony el Pony
fuente

220

¡Si! Cuando se lanza IE9 en enero de 2011.

Digamos que quieres un 15px par en los cuatro lados:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 usará el valor predeterminado border-radius, así que asegúrese de incluirlo en todos sus estilos llamando a un radio de borde. Entonces su sitio estará listo para IE9.

-moz-border-radiuses para Firefox, -webkit-border-radiuses para Safari y Chrome.

Además: no olvides declarar que tu codificación IE es ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Algunos desarrolladores perezosos tienen <meta http-equiv="X-UA-Compatible" content="IE=7" />. Si esa etiqueta existe, border-radius nunca funcionará en IE.

— Kevin Florida
fuente

77

Presumiblemente, si no está utilizando la metaetiqueta compatible con X-UA, ¿no necesita agregarla solo para que funcione en IE9?

— thepeer

72

Debería colocar las versiones de prefijo del proveedor PRIMERO y el estándar ÚLTIMO, de modo que si el navegador admite el estándar real, lo usará en lugar de la versión con prefijo del proveedor.

— Jason Berry

44

Correcto, no necesita la metaetiqueta ... solo necesita reemplazar el emulador ie7 si está incluido. De lo contrario, no te preocupes por eso.

— Kevin Florida

3

FYI en el actual IE9 beta 'border-radius' funciona correctamente usando un solo valor. Los cuatro valores no son obligatorios a menos que realmente desee que sean diferentes.

— mikemaccana

2

@nailer: Gracias por actualizar las esquinas. La primera versión alfa vs y beta vs de IE9 requirió las 4 esquinas declaradas. Acabo de descargar la última versión IE9 RC y me está dejando declaro un valor .. No sé cuando eso cambió ..

— Kevin Florida

46

La respuesta a esta pregunta ha cambiado desde que se hizo hace un año. (Esta pregunta es actualmente uno de los mejores resultados para Google "border-radius ie").

IE9 será compatible border-radius.

Hay una vista previa de la plataforma disponible que es compatible border-radius . Necesitará Windows Vista o Windows 7 para ejecutar la vista previa (e IE9 cuando se lance).

— David Johnstone
fuente

27

Mientras espera ... esquina cruzada (radio de borde) cruzado del navegador

— Luis Melgratti
fuente

18

Una solución alternativa y una herramienta útil:

CSS3Pie utiliza archivos .htc y la propiedad de comportamiento para implementar CSS3 en IE 6 - 8.

Modernizr es un poco de javascript que colocará clases en su elemento html, permitiéndole servir diferentes definiciones de estilo a diferentes navegadores en función de sus capacidades.

Obviamente, estos dos agregan más sobrecarga, pero con IE9 debido a que solo se ejecuta en Vista / 7, podríamos estar atascados por un tiempo. A agosto de 2010, Windows XP todavía representa el 48% de los sistemas operativos de cliente web.

— Peter G
fuente

2

CSS3 PIE fue, con mucho, la opción más fácil y menos intrusiva para esto.

— Chris Rasco

12

No está planeado para IE8. Vea la página de compatibilidad de CSS .

Más allá de eso, no se han lanzado planes. Existen rumores de que IE8 será la última versión para Windows XP

— Ben S
fuente

12

Obviamente estás equivocado, porque se supone que IE9 también es compatible con CSS3, y no veo que IE muera en ningún lado. Alguien por favor mata IE

— Starx

10

Resulta que IE8 es la última versión ... para Windows XP.

— M. Dudley

7

<!DOCTYPE html> sin esta etiqueta border-radius no funciona en IE9, no se necesitan metaetiquetas.

— JAVAC
fuente

6

Actualización rápida a esta pregunta, IE9 admitirá radio de borde de acuerdo con: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
fuente

4

Use -ms-border-radius: 15px, cualquier elemento que use css -ms- es compatible con IE.

— Iago Bruno
fuente

2

El problema del radio de la esquina de IE va a resolver.

http://kbala.com/ie-9-supports-corner-radius/

— jaya
fuente

2

¿Qué pasa con el soporte para el radio del borde y el gradiente de fondo? Sí, IE9 es para apoyarlos a ambos por separado, pero si mezcla los dos, el gradiente sangra por la esquina redondeada. A continuación hay un enlace a un mal ejemplo, pero también lo he visto en mis propias pruebas. Debería haber tomado una captura de pantalla :(

Tal vez la verdadera pregunta es cuándo IE admitirá los estándares CSS sin hacks propietarios de MS-FILTER.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

— SigmaBetaDiente
fuente

IE10 admitirá los gradientes CSS3 adecuados (la vista previa actual del desarrollador IE10 ya lo hace a través de -ms-linear-gradient). Si desea gradientes que respeten el radio del borde en IE9, debe usar SVG (ya sea un archivo SVG externo o uno que esté codificado en un URI de datos); consulte css3wizardry.com/2010/10/29/css-gradients-for- ie9 - también CSS3 PIE pronto automatizará esto, hay una versión de prueba disponible

— lojjic

Una solución rápida es envolverlo en otro elemento. Dele al elemento padre el mismo radio de borde y establezca su desbordamiento en oculto.

— Senne

1

SOLUCIONADO - no representa el radio del borde correctamente en IE 10 y 11

Para aquellos que no obtienen el radio -ms-border-radius: o el border-radius: para trabajar en IE 10,11 Y muestra todos los cuadrados, luego siga estos pasos:

Haga clic en la rueda de engranaje en la parte superior derecha del navegador IE
Haga clic en Configuración de vista de compatibilidad
Ahora desmarque las 2 casillas que están marcadas por defecto.

Asegúrese de que las casillas estén desmarcadas como en la imagen

— Allan Starr
fuente