Bordes Redondos en IE
Hemos visto en clase como podemos redondear bordes de diferentes elementos de nuestra página. Como sé que no os acordáis, os refresco un poco la memoria:
Si nuestro navegador soporta el estándar CSS3, usaremos:
border-radius: 3px; // propiedad CSS3
Hoy día esa propiedad ya es soportada por todos los navegadores modernos (incluido IE9). Aún así, todavia existe gente que usa versiones más antiguas de los navegadores. Para estos navegadores podemos usar:
-moz-border-radius:3px; // Firefox
-webkit-border-radius: 3px; // WebKit y Safari
Aunque con estas propiedades no nos validaran la página (no son estándar).
Internet Explorer, como no, es diferente. Como ya sabemos, las versiones 6, 7 y 8 de este “magnifico” navegador, no soportan propiedades de CSS3, por tanto, lo explicado antes no nos sirve.
Algunos sitios comentan que para solucionar esto en IE8 se ha de usar la propiedad: -ms-border-radius: 3px; Ni caso. Esa propiedad no funciona en ninguna de las versiones de IE indicadas (y me extrañaria que funcionara en IE9)
En clase vimos que podíamos solucionar esto usando una libreria en Javascript llamada DD_roundies.js
Para quien no le guste esa solución, o simplemente quiera saber alguna alternativa más, aquí os muestro como redondear bordes en Ineternet Explorer usando un archivo .htc
El método es muy sencillo:
Imaginad que queremos que este DIV tenga los bordes redondos en todos los navegadores:
< div id="redondo">Esto es algo muy útil< /div>
Para ello nos vamos al CSS y añadimos un selector ID para darles las propiedades:
#redondo{
...
-moz-border-radius: 8px; /* Firefox*/
-webkit-border-radius: 8px; /* Safari,Chrome.*/
border-radius: 8px; /* El estándar.*/
behavior:url(border-radius.htc);/* IE 8.*/
}
Como veis, para IE hemos añadido la propiedad behaviour (os remito al libro de CSS Avanzado) junto con ruta relativa de un archivo .htc. FIN. Eso es todo.
El archivo necesario se puede descargar de AQUI. En ese mismo enlace tenéis ejemplos de lo que acabo de explicar.
Ni que decir tiene que esta forma tampoco valida (estamos usando la propiedad Behavior que es propia de IE).
