Ajustar inconsistencias de hojas de estilo en internet explorer

Terminas el estilo de tu sitio. Lo visualizas en diferentes navegadores, hasta que llegas a internet explorer.

Dependiendo de las reglas de estilo que hayas aplicado algunos elementos pueden mostrar inconsistencias.

Hay tres actividades que puedes hacer para ajustar tu sitio a una versión particular de internet explorer:

  1. Define las versiones de Internet Explorer que quieres soportar.
  2. Ubica los errores de visualización.
  3. Soluciona los errores.

Define las versiones de internet explorer que quieres soportar.

No tienes que hacer compatible tu sitio con todas las versiones de internet explorer, así como no lo haces compatible con todas las versiones de los otros navegadores.

Si  tienes estadísticas de tu sitio – ej. google analytics – puedes determinar  el porcentaje de usuarios que visitan tu sitio utilizando internet explorer. Si consideras que el porcentaje de usuarios  es representativo y  vale la pena, incluye esa versión de explorer en tu lista de soporte.

Ubica los errores de visualización.

Visualiza qué elementos se visualizan diferente en la versión de internet explorer a la que le quieres dar soporte en comparación con la visualización que quieres lograr. Intenta separar cada elemento que se visualiza diferente e  investiga por qué se ve mal el sitio.  No es lo mismo decir simplemente “se ve mal el sitio” o “no funciona” a “este elemento ocupa más espacio”, “este elemento lo visualiza como bloque en lugar de ocupar espacio en el mismo renglón”. Para esto se necesita ubicar y  conocer la forma en que internet explorer está interpretando las reglas de estilo para un elemento en particular – generalmente se tiene que hacer por cada elemento que se quiere ajustar.

Para lograr esto se van a utilizar herramientas que sirven – entre otras cosas – para seleccionar un elemento del documento y conocer qué reglas está aplicando internet explorer.

Internet Explorer Toolbar (de microsoft): Es una opción para utilizar en las versiones 6 y 7 de internet explorer.

Internet explorer 8 ya tiene  herramientas de desarrollo  incluidas.

DebugBar herramienta que funciona desde ie6. Al igual que las herramientas anteriores también permite conocer las reglas del CSS que están siendo utilizadas por el elemento seleccionado en internet explorer. Lo bueno es que funciona incluso en sitios con iframes – útil para las aplicaciones de facebook.

Soluciona – en medida de lo posible – errores.

El último paso  es hacer los ajustes necesarios (comentarios condicionales y / o hacks en CSS) de manera parcial. Una vez que se tienen definidas las inconsistencias considero que es mejor comenzar a trabajar en la estructura – que  los elementos se visualicen en la posición esperada (bloques cuando sean bloques, en línea cuando haya dos o más elementos en la misma posición horizontal)  – y después estilo.

Instala las herramientas de desarrollo en la(s) versión(es) de internet explorer que quieres soportar (y obviamente las diferentes versiones de internet explorer para que puedas visualizar el sitio).

Ten en consideración que entre más antigua sea la versión de internet explorer más ajustes tienes que hacer.

“Los sitios no se tienen que ver igual en todos los navegadores – http://dowebsitesneedtolookexactlythesameineverybrowser.com/