Hacks CSS para arreglar problemas de maquetación en Internet Explorer

Uno de los problemas que más horas hace perder a los maquetadores web, es el tema de visibilidad de las páginas web en Internet Explorer. La mayoría de los navegadores respetan los estándares W3C, es decir, muestran las páginas tal y como el maquetador quiere, siempre que se use código HTML (ó XHTML) y CSS correcto.

Con Firefox, Safari, Chrome, Opera… no suele haber ningún tipo de problemas, respetan los estándares. Pero Microsoft y su Internet Explorer, no. Y lo malo es que la mayoría de la gente utiliza Windows, y de ellos, la mayoría usan el navegador que viene por defecto, Internet Explorer, sin preocuparse por buscar uno mejor (cualquiera, casi). Y no sólo eso, si no que cada versión de Explorer lee las páginas a su manera. Las versiones 8 y 9 parece que son algo más respetuosas, pero si nos vamos a la versión 7 y, sobre todo, la 6, lo más normal es que los sitios que hayamos maquetado, tengan varios fallos y descuadres. Y repito, desgraciadamente, la mayoría de los usuarios españoles usan Internet Explorer a día de hoy, y no sólo eso, si no que muchos tienen una versión vieja como la 6, y no se preocupan en actualizar.

Así que no podemos obviar a tantos usuarios, y tenemos que maquetar nuestros sitios pensando en casi todo el mundo. No podemos estar comprobando cómo queda una web en cada versión de cada navegador, pero por lo menos tenemos que preocuparnos por los básicos, e Internet Explorer, desde la versión 6 hasta la 9 (a día de hoy), sigue siendo el más usado.

Muchas veces veremos que algún elemento de nuestra web (div, menús, margin o padding de algunos elementos…) se ven mal en Internet Explorer. A veces son errores permisibles… si se va uno o dos pixeles hacia otro lado, bueno, se puede consentir. Pero hay veces que directamente la web entera se descuadra. Por ejemplo, la típica columna derecha de la web que acaba abajo del todo.

Para solucionar estos fallos existen los llamados Hacks. Que no son otra cosa que unos “truquillos” que podemos aplicar en nuestra hoja de estilos CSS para que sólo Internet Explorer lea unos estilos, y el resto de navegadores no.

Antes de nada, NO es recomendable usar Hacks. Ensucian el código. Es una chapucilla que se usa cuando no queda más remedio. Y además, hacen que una web deje de validar su código HTML y CSS, cosa que a veces se nos exige al maquetar una web.

Pero hay veces que podemos estar horas intentando que un elemento se vea igual en todos los navegadores y al final es imposible lograrlo. Y ante la desesperación, sí que nos pueden salvar.

Pongamos el ejemplo de que tenemos un div con anchura 500px, pero Explorer muestra otra anchura que le da la gana, por el motivo que sea. Podemos usar los hacks en nuestro CSS para que, efectivamente, declarar la anchura como 500px, pero hacer que Explorer lea que es de 480px. Esto se hace así, dependiendo de la versión de Explorer:

.ejemplo_div {

width: 500px;                 /* Navegadores decentes: Firefox, Chrome, Safari, etc */

width: 480px9;                /* IE8 e inferiores*/

*width: 480px;                 /* IE7 e inferiores */

_width: 480px;                 /* Solamente IE6 */

}

Explico un poco el código anterior: la primera línea “width” es la declaración normal del estilo. El resto, es decir, los hacks, tienes caracteres que los navegadores normales no interpretan, o interpretan que son comentarios, y no les hacen caso. IE sí les hace caso.

Hasta aquí la explicación de cómo aplicar los hacks para Internet Explorer. Mucha gente dirá que no son recomendables, y yo les doy la razón, pero hay veces que sacan de grandes apuros.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s