A la hora de crear una página web, siempre llega un momento delicado para todo desarrollador, darle el aspecto deseado a tu página de manera que se vea igual (o lo más parecida posible) en todos los navegadores.
Esto, a veces, no es tan fácil, puesto que unos navegadores cumplen con unos estándares y otros no.
El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores. Para el que no esté familiarizado, las hojas de estilo o CSS, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).
Y aquí es donde nos solemos encontrar con los problemas, las características de CSS3 (soportadas por Mozilla Firefox, Google Chrome, Safari…) incluyen la propiedad border-radius, la cual define la curvatura que debe tener el borde de un elemento. Esta propiedad es muy usada por los diseñadores gráficos por su estética, pero en el caso de Internet Explorer, IE 6 y 7 sólo dan soporte para CSS1 y la versión de IE 8 sólo soporta hasta CSS2.
Sin embargo, ya tenemos una solución para poder ver nuestros elementos redondeados en IE 6, 7 y 8. Es un script escrito por Remiz y muy fácil de usar. Sólo tienes que seguir estos pasos:
- Descargate el archivo border-radius.htc o la demo.
- Sube el archivo al mismo directorio donde se encuentra tu archivo de estilo .css ( En wordpress suele ser: wp-content/themes/nombre-de-tu-tema/ ).
- Añade a tu hoja de estilo la clase:
- Por último, dale el estilo a los elementos de tu página que desees, por ejemplo:
.curved {-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(border-radius.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
<div class=»curved» style=»background: url(http://example.com/photo.jpg);»></div>
¡Listo!, ahora tu imagen photo.jpg aparecerá con los bordes redondeados y sombra en todos los navegadores 😀
Nota: Nick F. ha ampliado funcionalidades, puedes echarle un vistazo a su tutorial en inglés y al artículo que ha escrito aNieto2k.
6 respuestas a «Redondear esquinas en Internet Explorer»
alguien sabe como redondear las esquinas de un div pero en opera? porfavor ayudenme!! pues llevo dias compatibilizando mi codigo con los navegadores..
saludos
Hola,
Con las versiones de Opera anteriores a la 10.5 no podrás redondear las esquinas ya que no cumplen dicha propiedad.
Sin embargo, la actual verión de Opera es la 10.53 y ya cumple con los estándares de CSS3. Sólo tienes que añadir al estilo de tus imágenes la siguiente línea:
border-radius: 15px;Se pueden definir diferentes tamaños de redondeo, para c/u de las esquinas, tambien se verifico que al cambiar de tamaño el navegador, el resultado se deforma, dando un texto fuera del box
te digo la verdad, no funciona
existe alguna otra opcion?
Puedes volver a mirar el artículo de A. Nieto (http://www.anieto2k.com/2010/04/12/anade-soporte-css3-a-internet-explorer-6-7-y-8/) a ver si ayuda.
Mira también que no tengas desactivado el javascript en el navegador.
Un saludo.
Hola,
Que buen aporte, me sirvió mucho, gracias Rocio.