Luis Herrero

Este es el primero de una serie de artículos sobre las diversas soluciones que existen a los diferentes problemas que pueden generarse en Internet Explorer.

Después de estar dedicándole un rato a la maquetación de una página web, corregir los valores CSS para que se represente de manera idéntica al diseño que nos han pasado, y comprobar que funciona estupendamente en Safari, Firefox o Chrome, llega el momento de ver nuestro trabajo en Internet Explorer.

Y es en ese momento cuando nos echamos las manos a la cabeza, maldecimos a toda la parentela de los empleados de Richmond y nos desesperamos porque el navegador con más presencia en el mundo sea el que peor respeta las reglas CSS.

Corrigiendo las hojas de estilo

Una de las peculiaridades de Explorer son los comentarios condicionales. Estos comentarios html contienen una condición que, de cumplirse, permite ejecutar el código que hay definido dentro del comentario. Estos comentarios son exclusivos de Explorer, con lo que son totalmente inocuos en el resto de navegadores.

1
2

<!--  COMENTARIO NORMAL -->
<!--[if IE]> COMENTARIO CONDICIONAL<![endif]-->

Estos comentarios nos van a permitir añadir llamadas a hojas de estilos externas, en las que aplicaremos las correcciones necesarias para Explorer. Ya que además, a lo largo de las diferentes versiones algunas reglas no necesitan ser corregidas, lo ideal es hacer la llamada específica por cada una de las versiones de Explorer que queramos corregir:

1
2
3
4
5
6
7
8
9
10
11

<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="css/estilosIE6.css" />
<![endif]-->
 
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="css/estilosIE7.css" />
<![endif]-->
 
<!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href="css/estilosIE8.css" />
<![endif]-->

Sin embargo, es muy probable que nuestra maquetación no requiera de correcciones para todas las versiones de Explorer. O a lo mejor, con mucho criterio hemos decidido no seguir dando soporte a la versión 6 de Explorer. Al fin y al cabo, no se trata de hacer lo que no hace ya ni siquiera Google

En estos casos, vamos a poder emplear un condicional más genérico para atacar a varias versiones de Explorer a la vez.

En este cuadro se describen los diferentes tipos de condicionales que se pueden aplicar:

[ if IE ]

Se cumple para todas las versiones de Explorer

[ if IE 7 ]

Se cumple para la versión específica indicada en el número

[ if !IE 8 ]

Se cumple para todas las versiones salvo la indicada en el número

[ if gt IE 6 ]

Se cumple para las versiones mayores que la indicada en el número

[ if lt IE 7 ]

Se cumple para las versiones menores que la indicada en el número

Por último, indicar que dentro del comentario condicional, podemos escribir cualquier código html, no solamente llamadas a archivos CSS sino también llamadas a archivos JS, etc.