Como Habilitar Border Radio De CSS3 En Internet Explorer 8

CSS3 nos da la capacidad de crear esquinas redondeadas con la propiedad border-radius. Pero, como usted ya sabe, esta nueva función no está reconocida en Internet Explorer 8 (IE8) y sus versiones anteriores. Así que si usted está solicitando CSS3 Border Radius a un elemento, este todavía aparecerá como un rústico cuadro con puntas afiladas.

Usted puede encontrar una gran cantidad de consejos en Internet, que te recomendaran lo mismo: ignorar IE8. Podrías desear hacerlo. Pero si  estás trabajando en un sitio web para una institución del gobierno o de un banco, puede que no tenga otra opción. Todavía tiene que hacer que el sitio web se vea tan bien como en los navegadores modernos, lo que incluye la capacidad de aplicar bordes redondos con CSS3.

CSS3Pie

CSS3Pie es una especie de relleno para elementos decorativos de CSS3. Aparte de CSS3 Border Radio que vamos compartir en este articulo, CSS3Pie también soporta propiedades como Shadow Box y degradados, aunque está limitada al tipo de degradado lineal.

Descarga CSS3Pie . Luego ubique el archivo dentro de su directorio de proyecto, recomendamos que este ubicado con los demás archivos CSS. Nuestro ejemplo quedara de la siguiente forma:

Para establecer bordes redondeados, añadiremos a nuestra hoja de estilos la siguiente clase, la cual aplicaremos a los elementos que deseemos:

[css]

.border-radius {
height: 100px;
width: 100px;
background-color: #2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
[/css]

Como la anchura y la altura del elemento es de  100px, y el radio de la frontera se establece en 50px, el elemento se convertirá en un círculo:

En IE8, como era de esperarse, aún se muestra como un cuadrado (suspiro…), pero no te preocupes.

Para activar el efecto de esquinas redondeadas, agregue la siguiente línea: behavior: url(css/pie.htc);, así:

[css]

.border-radius {
height: 100px;
width: 100px;
background-color: #2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
behavior: url(css/pie.htc);
}

[/css]

Tenga en cuenta que la ruta del archivo de la url () debe ser una ruta absoluta o relativa al archivo HTML. También puede añadir esta línea en un archivo separado.

Es posible que tenga una hoja de estilo que se designa para Internet Explorer. Usted puede poner behavior: url(css/pie.htc); dentro de ese archivo, siempre y cuando esté declarado en el mismo selector CSS, así:

[css]
/* declared in ie.css */
.border-radius {
behavior: url(css/pie.htc);
}
[/css]

Actualiza la página en IE8. La esquina redondeada ahora debería funcionar (ta-da!). Esta debería también trabajar en IE7.

Solución De Problemas

Internet Explorer puede tener comportamientos inesperados (como cosa rara). Si esto no funciona (tal vez la esquina redondeada no tenga efecto, o el elemento seleccionado ha desaparecido), añadiendo las propiedades de posición y zoom debería de resolver el problema:

[css]
.border-radius {
behavior: url(css/pie.htc);
position: relative;
zoom: 1;
}
[/css]

Como vemos, la solución para este pequeño inconveniente es extremadamente sencillo. Y si queremos implementar esta solución a nuestro blog en WordPress? Sencillo, solo tienes que hacer lo siguiente.

Usando CSS3Pie En WordPress 

En este caso, como WordPress es dinámico, donde las páginas pueden usar diferentes niveles de URLs, tenemos que especificar una ruta absoluta.

Puede cambiar la ruta de acceso en el CSS de esta manera:

[css]

.border-radius {
behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
position: relative;
zoom: 1;
}

[/css]

También puedes añadir estilos internos en el archivo header.php, de esta manera:

[css]

<style>
.border-radius {
behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
position: relative;
zoom: 1;
}
</style>

[/css]

Aunque CSS3Pie nos facilita algunas tareas de CSS3 en IE8, no podemos quitarnos de encima la mala imagen que tiene este navegador para los desarrolladores y diseñadores; solo esperamos, que esta pequeña guía sea de gran utilidad para cuando uno de los requerimientos de desarrollo sea este poco pedido navegador web.