2010-11-09 64 views
9

Me gustaría saber cómo hacer bordes redondeados en IE8. Estoy usando¿Cómo hacer bordes redondeados en IE8 con CSS?

-moz-border-radius:4px; 
-webkit-border-radius:4px; 

para mozilla y safari.

+0

Así es como se puede hacer con CSS puro y sin javascript. Es un espectáculo de gong, y fácil de romper, pero no obstante, aquí está. [Esquinas redondeadas de CSS puro sin imágenes y javascript] (http://www.worthapost.com/articles/pure-css-rounded-corners-without-images-and-javascript) –

Respuesta

6

Hay un complemento jQuery para eso. http://jquery.malsup.com/corner/

+1

No preguntó cómo hacerlo sin CSS o con javascript. – Rob

+3

@Rob: las otras respuestas ya han explicado que no es posible implementar en CSS puro para IE8. –

+0

@Matt Ball gracias por su camino. – kst

1

No puede. IE no maneja las normas y prácticas modernas y, específicamente, no existe tal propiedad de CSS en IE8.

+0

** Puedes ** hacerlo en CSS , es solo un gran dolor en el cuello (demasiadas etiquetas div). Alternativamente, puede usar CSS e imágenes redondas de esquina. –

0

En IE9 puede usar border-radius.

Para las versiones anteriores de IE, existen bibliotecas de JavaScript que lo harán por usted. No puedes hacerlo puramente con CSS. Por lo menos, necesitarás imágenes de fondo.

+0

** Puedes ** hacerlo puramente en CSS, es solo un gran truco y un dolor en el cuello (demasiadas etiquetas div). Alternativamente, puede usar CSS e imágenes redondas de esquina. –

+0

@rockinthesixstring - ¿En serio? Supongo que si agregaste suficientes divs, con bloque y color de fondo ... – Moshe

+0

Lo he visto ... es brutal de implementar y fácil de romper. –

3

Descargue https://code.google.com/p/curved-corner/ e inclúyalo en su proyecto. Luego usa el siguiente CSS para tener una esquina redondeada.

Por ejemplo:

.somediv{ 
    -webkit-border-radius:4px;  /* older webkit based browsers */ 
    -khtml-border-radius:4px;   /* older khtml based browsers */ 
    -moz-border-radius:4px;   /* older firefox */ 
    border-radius:4px;    /* standard */ 
    behavior: url(border-radius.htc); /* IE 6-8 */ 
} 

La url para el archivo es relativa al archivo HTML que carga el CSS. Así que esto es diferente al fondo: comportamiento de url (...) que es relativo al archivo CSS. Más detalles here

0

Puede usar CSS3 PIE para esto. Es fácil de implementar. Descárguelo aquí: http://css3pie.com/download/ y extraiga su contenido. Luego, en su hoja de estilo, simplemente ponga behavior:url(css3pie/PIE.htc); junto con los códigos CSS de cada elemento que usa border-radius.

Por ejemplo:

.samplediv{ 
    behavior:url(css3pie/PIE.htc); 
    -webkit-border-radius:10px; 
    -khtml-border-radius:10px;  
    -moz-border-radius:10px;   
    border-radius:10px;    
} 
Cuestiones relacionadas