Problemas de CSS en Internet Explorer

Internet Explorer tiene una manera de entender CSS muy “peculiar” que  hace que todos los diseñadores web tengan que dedicar gran parte de su tiempo en hacer que su proyecto funcione particularmente en Internet Explorer. Esto es una gran pérdida de tiempo y puede que de dinero, pero que no hay más remedio que afrontar, por esto:

Hay que preocuparse por el volumen de visitas que van a llegar al website por parte de Internet Explorer, porque es tal que no se puede despreciar.

Caso particular

Particularmente, en Sortea2, nuestra página de sorteos, también tuvimos que lidiar con estos problemas, tuvimos que tomar medidas porque la página, que se visualizaba correctamente en firefox, opera, etc., era impresentable en Explorer, las cosas normalmente se montaban unas encima de otras y tal.

Qué cosas dan problemas

Tras haber terminado el diseño de Sortea2, he llegado a la conclusión de que estas cosas son las que dan problemas:

1. Listas.
2. Márgenes negativos para posicionar.
3. Posicionamiento normal.
4. Desbordamiento de divs.
5. Imágenes de fondo.

1.  Las listas es lo que habitualmente más problemas da, cuando quieres formatearlas con padding y margin suelen tratar las cosas de diferente manera que los navegadores normales. Por ejemplo, no puedes variar el valor de margin-left en las listas para que estén alineadas a la izquierda con tan solo poner: “margin-left:0px;”.
También suelen dar problemas las listas que se colocan a lo ancho (float:left;), hay que ir probando con qué valores funcionan bien. Por ejemplo, en nuestro menú horizontal, el valor float:left; había que ponerlo en #menu_horizontal li a {} para que funcionase, mientras que en otros lugares se podía colocar directamente en #menu_horizontal li {}.

2. Los márgenes negativos no sé exactamente por qué dan tantos problemas. A veces funcionan, otras veces no, y otras veces hay que poner valores distintos a lo habitual para que se coloque en el lugar que se desea. El mejor ejemplo es en la parte de arriba de sortea2, en la que se ve una diferencia de colocación entre cualquier navegador y Internet Explorer, esto es debido a que a veces los márgenes negativos no funcionaban y tuvimos que intentar colocar las cosas con otros valores.

3. El posicionamiento normal, con “position:relative y absolute” no suele dar muchos quebraderos de cabeza, simplemente algunas veces hay que cambiar los valores un poco para que las cosas cuadren.

4. El desbordamiento de divs tiene su “particularidades” en Internet Explorer cuando se quiere hacer “overflow”. Normalmente al desbordarlo suele tener después un tamaño extraño que cuesta colocar. Esto nos pasó con el div #resultado, que se despliega en la pantalla de sorteos simples al hacer un sorteo, en firefox funciona perfectamente, pero en internet explorer se ve como se contrae un poco cuando la lista de ganadores es demasiado grande y hace que salga el scroll en el div.

5. Las imágenes de fondo se suelen colocar correctamente y tal, el problema es el orden en que se cargan. Por ejemplo, al principio, en las pestañas que se utilizan cuando se utiliza el buscador o en la pantalla de Mis Sorteos, utilizábamos un hover que consistía en otra imagen, Bien, pues firefox y opera cargaban esa imagen antes de que terminara de cargar la página, por lo que el efecto se hacía correctamente; el problema lo daba Internet Explorer, porque se cargaba la imagen en el momento en que se hacía el hover, con lo que había que esperar un tiempo para ver el efecto. Fue tan desastroso el resultado que optamos por subrayar esos links al pasar por encima y listo, de camino lo dejamos igual para ambos navegadores.

Soluciones

La solución por la que optamos nosotros fue:

• Una hoja de estilos común, en la que las propiedades que funcionasen en ambas estuvieran recogidas.
• Una hoja de estilos para Internet Explorer, con todas las correcciones posibles para que se mostrase bien la página.
• Una hoja de estilos para los demás navegadores. Para evitar que unas propiedades se pisaran a otras, optamos por poner en una hoja de estilos independiente todas las propiedades que daban problemas en Explorer, pero con los valores que serían normales.

Ahora bien, ¿cómo sabemos qué navegador está mostrando la página y por lo tanto qué hoja de estilo abrir?
Bien, nuestra página está hecha con PHP, por lo que os voy a mostrar un método para hacerlo con este lenguaje (también se podría hacer con javascript).

Abrir una hoja u otra dependiendo del navegador

Bien, PHP recibe por parte del navegador una serie de variables de servidor (idioma, navegador, versión de este último, etc.), pues tenemos que recoger lo que diga la variable que dice qué navegador está mostrando la página:

$idnavegador = $_SERVER[‘HTTP_USER_AGENT’];

Esto es lo que obtendríamos de firefox:
Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

Y esto es lo que nos devuelve Internet Explorer:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)

Debe haber alguna manera universal que distinga ambos códigos, porque Internet Explorer da problemas igualmente en su versión 6 como en su versión 7.
Bueno, pues vamos a buscar las diferencias entre ambas cadenas para ver qué podemos sacar que nos diga que estamos en Explorer.

En Mozilla/X.0 no se puede sacar mucho, la verdad, porque es casi idéntico y con PHP no se podría hacer un cálculo. Pero si nos metemos dentro del paréntesis  empezamos a ver cosas interesantes, y ya si nos metemos en ver que hay después del punto y coma, ya lo tenemos.

Uno nos devuelve una U y otro nos dice MSIE X.XX, ahí está la diferencia; pero queremos detectar cualquier explorer, no una versión determinada; bien, pues recoges la palabra MSIE y listo, con un parseo veremos que se puede hacer fácilmente:

Es cierto que puede ser un poco lioso, pero es simple: se busca el punto y coma, se coge lo que hay después de él, y luego se cogen 5 caracteres (con 4 recuerdo que dio problemas una vez) de lo que se haya sacado. Con esto ya tenemos esto: “MSIE “, ¡era lo que queríamos!, bueno, pues ahora con un if abrimos una hoja u otra y ya está todo listo.

Ya está, ahora ponemos las propiedades que dan problemas en ie-hacks y ya solo se verán en ese navegador.

Conclusión

Internet Explorer es un navegador problemático y tenemos que poner nuestros medios para hacer que esos problemas desaparezcan porque tiene una cuota de mercado espectacular y merece la pena dedicarle tiempo.
Puede que nuestro método de obtención del navegador no sea precisamente la mejor y la más simple, pero lo cierto es que funciona y que jamás ha dado ningún problema.

Consejo final

Como consejo final te diré que cada vez que hagas algún cambio relativamente importante en tu web, si no eres un asiduo a Internet Explorer, que la pruebes ahí antes de seguir con otra cosa, porque luego volver atrás para resolver problemas antiguos es muy molesto.