Soluciones a los problemas de visualización en Internet Explorer
(4 votos, promedio: 3,50 de 5)
Cargando...Damos un repaso a las técnicas más usadas para lidiar con la tarea de conseguir que nuestra web se vea bien en todos los navegadores, poniendo especial atención a Internet Explorer, puesto que es el que más problemas causa.
Si estás creando una página web y te encuentras ya en la fase de maquetación web, entonces estás en la fase en la que llega la hora de convertir tu diseño en realidad. Se trata de plasmar aquello que tenías pensado en HTML y CSS. Esto puede resultar emocionante, pero muchas otras veces, y más si se cuenta con poca experiencia, puede llegar a ser desesperante.
El problema de la visualización en Internet Explorer
Conforme se avanza en este proceso de maquetación, uno se da cuenta que no es suficiente con maquetar intentando que se vea bien en TÚ navegador, hay que intentar que todo usuario que entre a tu web desde cualquier otro navegador, pueda verla tan bien como tú.
Intuitivamente cabría pensar que esto sucede así por defecto, que sin que tengamos que hacer nada la página se va a ver siempre tal y como la estamos viendo nosotros en nuestro navegador.
Nada más lejos de la realidad, cada navegador es un mundo, o mejor dicho tiene una forma ligeramente distinta de renderizar el HTML y el CSS.
En el caso de Internet Explorer, cada una de sus versiones (ie6, ie7, ie8…) tiene una forma MUY distinta de interpretar el código que tú estás escribiendo. Como resultado un usuario que entre a tu web desde Internet Explorer 7 u 8 muy probablemente no va a ver lo mismo que está viendo un usuario que entra desde Firefox o Chrome.
La solución puede resultar complicada, sobre todo sin experiencia, puesto que conforme arreglas los estropicios de un navegador, con frecuencia algo se estropea en otro.
Internet Explorer 6, 7, 8 y 9, una etapa que por fin terminó
Por mi experiencia de los años que llevo trabajando como diseñadora web, si el código que estás construyendo está bien hecho y si el CSS es correcto, tu web debería verse bien en todos los navegadores comunes, salvo en versiones antiguas de Internet Explorer.
Por suerte, a día de hoy podemos considerar muertas las versiones más problemáticas de Explorer.
Los navegadores más comunes, son los siguientes:
Mi consejo es que no pierdas el tiempo con versiones inferiores a Explorer 11. Sí, has leído bien. Echa un vistazo a esta tabla:
Internet Explorer es usado por un 4% de usuarios, y dentro de ese 4%, cerca de un 90% usa IE11. Por tanto no hay razón pra darle soporte a versiones anteriores. Preocúpate por IE11 y Microsoft Edge, del resto olvídate.
El resto del artículo queda a modo de documentación por si todavía alguien a día de hoy necesita de estos recursos. Pero el consejo sigue ahí. No pierdas el tiempo con navegadores deprecados que tienen un uso ínfimo.
Entonces, ¿qué hacemos con Internet Explorer?
Si estás familiarizado con el diseño de páginas web y más en concreto con el uso de CSS, sabrás lo que son los hacks (y seguramente los habrás aplicado más de una vez).
Para quien no lo sepa, los hacks son trucos que usamos los front para conseguir que las páginas web se vean igual en todos los navegadores, jugamos con los errores de los navegadores para conseguir una correcta visualización.
Como profesional, no recomiendo su uso. Los hacks son trucos, trampitas que hemos tenido la suerte de descubrir, pero que al fin y al cabo tienen un comportamiento extraño y no habitual, por lo que no podemos estar seguros de que sigan comportándose así en un futuro.
Si maquetas tu web usando un hack y éste deja de ser útil dentro de un año, ten por seguro que tu web se verá mal nuevamente.
Hay otras técnicas más recomendables para conseguir que se vea bien tu web en distintos navegadores. Las vemos a continuación.
Usar un reset para CSS
Los navegadores tienen por defecto un estilo básico para el código HTML.
Por ejemplo los encabezados (H1, H2, etc.) se visualizan por defecto a mayor tamaño y en negrita, los enlaces en azul y subrayados, se dan márgenes y paddings a ciertos elementos, etc.
Esto puede provocar comportamientos extraños de las propiedades CSS a la hora de diseñar nuestras páginas web, y la mayoría de los problemas de compatibilidad entre navegadores pueden venir de ahí sin saber nosotros porqué.
Lo mejor es empezar una hoja en blanco de verdad, y para eso tenemos que resetearla. Yo suelo usar Normalize, pero hay otros como el famoso reset de Eric Meyer.
A parte de usar un reset prefabricado, como estos que os presento, lo ideal es adaptarlo a cada diseño en el que trabajemos para lograr una mayor flexibilidad y no escribir código innecesariamente.
Usar una hoja de estilos distinta para Internet Explorer
Aquí viene la parte más importante de este artículo, donde aprenderemos como hacer una hoja de estilos para Internet Explorer o incluso para una versión concreta del mismo.
Para lograr esto se usan los comentarios condicionales, que son etiquetas que Internet Explorer interpreta, mientras que el resto de navegadores las toman como simples comentarios y las ignoran. Por tanto, todo lo que vaya dentro de esas etiquetas sólo será leído por Internet Explorer. Esa es toda la magia, ¿bonito no?.
Para usar los comentarios condicionales en Internet Explorer, tenemos que escribir en el código fuente de nuestra web, dentro de las etiquetas <head> y </head>, las siguientes líneas:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Con esto básicamente estamos proporcionado a Internet Explorer una hoja de estilos (ie.css) que el resto de navegadores no pueden leer.
Como veis colocaremos ENCIMA la hoja de estilos común a todos los navegadores (general.css), y debajo los comentarios condicionales con la hoja de estilos para Internet Explorer, donde pondremos todas las correcciones necesarias.
Un ejemplo, si te encuentras haciendo la maquetación de una web y tienes un problema con los márgenes del id #header, por ejemplo, puedes darle un margen en el CSS común (que leerán todos los navegadores, incluido Internet Explorer) y darle un margen distinto en el CSS para Explorer (que sólo leerá Explorer, y sobrescribirá el valor del CSS común).
Usar una hoja de estilos para una versión concreta de Internet Explorer
Esto también es posible, y lo haremos igualmente por medio de los comentarios condicionales. En el código anterior, tendremos que sustituir estas líneas:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Por alguna de las siguientes, dependiendo de a qué versión de Explorer queramos apuntar:
Hoja de estilos para todos los navegadores menos IE
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="no-ie.css" />
<![endif]-->
Hoja de estilos sólo para IE 7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Hoja de estilos sólo para IE 6
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
Hoja de estilos para IE 6 y versiones más antiguas
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-old.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-old.css" />
<![endif]-->
Hoja de estilos para IE 7 y versiones más antiguas
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-old.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-old.css" />
<![endif]-->
Hoja de estilos para IE 8 y versiones más antiguas
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-old.css" />
<![endif]-->
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-old.css" /> <![endif]-->
Hoja de estilos para IE 8 y versiones más modernas
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-up.css" />
<![endif]-->
Otras alternativas: Universal IE
Diseñar una página web y conseguir que una web se vea bien en Internet Explorer es una tarea muy complicada.
Muchas empresas y profesionales han dejado de dar soporte a este navegador para versiones inferiores a IE11, y es la opción que nosotros recomendamos. Esto es debido principalmente a que su uso se ha reducido drásticamente con el paso del tiempo en beneficio del uso de navegadores más modernos y seguros.
Y no nos engañemos, también se debe a que resulta muchas veces una pesadilla lidiar con este navegador.
En lugar de ignorar por completo a sus usuarios, si en tu caso necesitas dar soporte a versiones muy antiguas de Internet Explorer, puedes usar un script que hace que versiones anteriores a ie7, se comporten, interpreten y muestren las páginas web como lo hacen las versiones modernas del Explorer.
Aquí el código, y también en Google Code:
IE8.js
Actualiza MSIE5.5-7 para ser compatible con MSIE8.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"></script>
<![endif]-->
Ahora sí, con el uso de estas técnicas, estaremos en mejores condiciones de hacer páginas web que puedan ser visualizadas y navegadas del mismo modo (en la manera de lo posible) en todos los navegadores.
39 respuestas
Saludos desde el 2020. Tengo un problema con la version 10 de explorer. con la técnica de los hacks no me ayuda. Me ayudo para las posteriores. Pero en esta nada. He probado a usar data-useragent invocado desde js para el 11 lo llama correctamente pero para el 10 nada. No lo ejecuta. Ademas tengo problemas por que el emulador que uso es el de explorer. El resto de emuladores que en probado. tanto aplicaciones como online no responden correctamente. La mayoría ni visualiza la web.
Gracias, muy buenos aportes.
andres.tilo ¿Has podido solucionar el problema para que funcione con los FRAME?
Saludos.
Buenas tardes, se que el artículo fue publicado mucho antes que que yo decidiera estudiar programación, ahora la cuestión es la siguiente, siendo que internet explorer ya va en la versión 11 tengo problemas de vista de algunos estilos, no se cual puede ser la causa si se supone que para ie 10 y 11 no iba a tener problemas por ende necesito ayuda porque tengo problemas con la página de la empresa y me tienen colgado. Agradezco una pronta pero muy pronta ayuda. Gracias
Una curiosidad …
Aplico el reseteado y todo va bien, pero tengo otro problema.
Tengo una especie de Intranet en una carpeta de una unidad de red. No la sirve un servidor sino que simplemente está en una unidad de red donde acceden los usuarios con un acceso directo.
El caso es que si se ejecuta en Internet Explorer, se interpretan solo ALGUNOS estilos CSS.
Si la carpeta de esa Intranet se copia a cada C: y se lanza de nuevo (tb. en IE) se interpretan bien TODOS los estilos.
¡Es rarísimo! 2 comportamientos distintos en los mismos PCs, SOs y exploradores con la diferencia de si la carpeta está en C: o en V:
El pertinente fichero CSS se lee en todos los casos porque hay estilos que sí se aplican.
¿Alguna idea de por qué?
El S.O. es Windows 7 (32 bits) y el I.E. es la versión 11.
Con Chrome y Firefox funciona siempre bien e igual en cualquier caso.
¡Muchas gracias!
dentro del ie7.css que va el codigo del reset
Excelente post muchas gracias Verónica es info muy muy útil.
Saludos Vero:
Tengo un problema con la visualización de un menu. Hice un CSS especial para IE7 y el General para los demás exploradores. Todo esta bien pero me he dado cuenta que el CSS general esta afectado al que hice para IE7. Principalmente en la visualización de un menu que hace que aparezca encimado. Lo curioso es cuando le quito el CSS general y dejo solo el de IE7 se ve perfecto.
¿Porque el CSS general esta afectando a la visualización del menu en IE7? Puse el comentario para IE7 tal y como viene explicado aqui, antes del CSS general, etc
Espero me ayudes. gracias
Impecable y super claros todos los datos y soluciones. Gracias
Hola Verónica. No conseguía solucionar que mi página se viese ni medio bien con Explorer, y gracias a tu post lo he conseguido. Estoy flipando de lo fácil que me ha resultado.
Muchas gracias por tus explicaciones, es fabuloso que haya gente como tú.
Un saludo.
Hola Verónica, hace mucho tiempo que escribiste este post, pero yo lo encontré hoy y SOLUCIONÉ mis problemas con la web. Ahora se ve de maravilla en todos los exploradores. Eres mi heroina!!!. Fue tan sencillo como subir la hoja para IE ANTES de la normal. La tenía más abajo. MUCHAS GRACIAS.
Excelente post! Es cierto que es muy triste que a estas alturas los diseñadores web tengamos que seguir sufriendo la incompetencia de Explorer. Puede que los condicionales sean lo más práctico para solucionar errores en versiones diferentes de IE.
Buenas amigos, una pregunta porque existe dos versiones o tipos de:
IE7.js
Actualiza MSIE5.5-6 para ser compatible con MSIE7.
IE8.js
Actualiza MSIE5.5-7 para ser compatible con MSIE8.
Es así como funciona Laura, revisa la ruta de la hoja de estilos, el nombre del archivo, etc.
Encontré tu artículo buscando una solución a esto de IE, ya probé poniendo los comentarios condicionales, pero IE no me reconoce la hoja de estilos que le asigno :( Lo pongo tal cual aquí los explicas (claro cambiando la ruta de mi hoja de estilos) pero nada.
No tengo ningún problema con Firefox, Chrome, Safari u Opera, el problema viene con IE9 que no reconoce ni la hoja de estilos general y mucho menos la que le asigno con el método que brindas.
¿Con este comentario no importa que versión de IE sea?
if IE
Lo curioso es que tengo una web que construí hace unos meses y aún no usaba mucho las hojas de estilo, así que todos los estilos están asignados dentro de cada html y solo así explorer reconoce los estilos. Con las hojas de estilo reconoce fondo, fuente, etc, pero me ignora sobre todo los valores de márgenes y otras pocas cosas.
No sé si tenga que ver el programa que uso (dreamweaver) o que soy usuario mac, pero es una tontería, me desquicia IE :(
Muchas gracias, espero me puedas ayudar un poco.
Gracias por el aporte, me solucionó el problema…
Gracias.
Hola! Muy interesante el artículo, me va a ser de gran utilidad!
¿Es muy necesario/recomendable realizar el reset? ¿Cuáles son los mayores problemas de no utilizarlo?
Gracias de antemano.
Te recomiendo que lo uses por costumbre en cada web que hagas. El reset te permite poner a cero todos los estilos que vienen por defecto de los navegadores, porque incluso cuando todavía no has dado estilos a nada, cada navegador tiene por defecto estilos predeterminados para cosas como los encabezados, márgenes, etc.
Con el reset eliminas problemas de compatibilidad entre navegadores, si no lo usas vas a tener más problemas de los necesarios para hacer que tu web se vea bien en los distintos navegadores. Así que sí, en mi opinión es necesario.
Vemos que ha pasado algún tiempo y casi está desaparecido jaja XD
Verónica, he conseguido hacer que me lea la hoja alternativa pero… ahora ya no me lee la otra para firefox :(
he puesto esto:
[if lt IE 8]
[if lte IE 7]
y ahora genial, tengo el explorer bien, pero el firefox mal… cómo se hace porfiii, no será por no intentarlo…
Antonio, la hoja para Internet Explorer va ANTES que la hoja normal para el resto de navegadores. Puede ser eso.
No lo consigo :(
Pongo el comentario entre el head, pero no me lee el css que he creado…sólo hace caso al normal…
De todas formas, muchísimas gracias por poner esto, por que me estaba desesperando, imagino que cuando lo consiga, será algo bastante fácil :)
Muchísimas gracias, me estaba volviendo loco!
Funciona perfectamente en ie6 y ie7.
Gracias,
Felix.
Ahora aclarado. Muchas gracias de nuevo!
Una pregunta más, Verónica. Por lo que voy entendiendo, p.e. si en el id header en IE 7 (por ejemplo) se vé mal, dices que entonces se cree una css especial para ese navegador. ¿Quieres decir que se haga “a pelo” según se vea en uno u otro? es decir, suponiendo que en IE 7 se vea muy estrecho, crear una css especial para el IE 7 haciéndolo más amplio “a pelo” (con un href concreto para él), y si (por ejemplo) en IE 6 se vé más amplio, crear otra css especial para el IE 8 haciéndolo más estrecho “a pelo” (con otro href concreto para ese), y así sucesivamente?
Espero perdones mi analfabetismo pero recién empiezo y he de entregar algo! Un abrazo.
Ups, creo que estoy algo confusa… ¿El “reset” se coloca en el documento html o en la css?
Y los comentarios especiales para IE ¿se colocan en una css especial para IE, o en el html? Aghhh :)
:) jeje no te preocupes Ana, al principio cuesta aclararse. Por partes:
El reset se coloca en el css, y va lo primero de todo, antes de empezar a declarar propiedades de la página.
Los comentarios condicionales van en el html, la idea es enlazar a una hoja de estilos externa, como se hace normalmente dentro del html, pero meter esa hoja de estilos dentro de los comentarios condicionales para que sólo acceda a ella Internet Explorer.
La idea de los comentarios condicionales es más o menos como dices, “a pelo”, pero claro, no te lies tampoco a poner hojas de estilo para cada explorador… si está bien maquetado posiblemente sólo te haga falta tocar cosas para ie6, y tal vez algo para ie7, pero no abuses de esto porque tampoco es el sentido. La idea es recurrir a ello cuando no hay manera de lograr crossbrowsing con la hoja de estilos general.
Saludos.
Muchas gracias!
Verónica, los comentarios condicionales ¿se ubican “dentro de las etiquetas” significa dentro del Head?
Se pueden pegar tal cual los ponéis aquí, “y ya está”? Y luego proceder normalmente?
Gracias y un saludo cordial.
Ana,
Sí, van dentro de las etiquetas <head> y </head> como la hoja de estilos normal (voy a modificar el artículo porque me comí esa parte), y el código es tal cual, acordándote de poner la ruta donde se encuentra tu archivo css… después, todo lo que especifiques en esa hoja de estilos sólo será leído por Internet Explorer.
Suerte! ;)
Yo sigo prefiriendo usar una sóla CSS para todos los navegadores (se puede hacer compatible para todos), porque si luego hay que actualizar el site o hacer cambios es menos complicado. Sobre todo para webs grandes.
Cuestión de preferencias de organización supongo, a mí me es más fácil separar de esa manera y cuando tengo que retocar código busco más rápidamente. Lo que sí es cierto es que con los años la hoja de estilos para Internet Explorer se hace cada vez más pequeña ;)
Como desarrolladores web, ya hace tiempo que no teníamos en cuenta al E6. Es increíble el ritmo de cambios que está adquiriendo esto.
Ie6 aún representa un porcentaje de visitantes importante a tener en cuenta.
Nos costará aun librarnos de este problematico explorador.
Un saludo.
Bueno, yo reviso con frecuencia las estadísticas de uso de navegadores y por suerte la tendencia es a desaparecer el uso de ie6… nos está costando una década librarnos de él, pero la gente está renovando sus aplicaciones. Y es que son demasiados avisos muchos de grandes compañías, incluso el propio Microsoft recomienda actualizar a versiones reciente de Internet Explorer.
Así que de momento, tendremos que seguir lidiando con él sí, pero dentro de un tiempo será un navegador de uso minoritario.
Por cierto, el soporte para css3 de ie9 (que está en desarrollo) está muy mejorado :) ya era hora que los de Microsoft se empezaran a poner las pilas.
Estoy contigo.
Creo que firefox es el mejor pero por lo menos el 75% de la gente utiliza el explorer y hay que adaptarse a él.
Y eso que firefox ofrece mil y una herramientas impresionantes.
Saludos
Excelente articulo y excelente recurso web, actualmente estoy lidiando con el problema del odiado IE5 (Lo odio completamente) a causas de él mis visitas están por el suelo, pero gracias a esta información tratare de mejorar mi diseño y ver como me va mejor.
Hola Verónica.
Lo que comentas es muy bonito y yo lo comparto.
El problema, es que tenemos que ser realistas y que pese a que cada vez más gente utiliza otro tipo de navegadores, sobre todo Firefox, la mayoría utiliza el explorer, y sobre él debemos de trabajar.
Yo también me vuelvo loco a la hora de diseñar un sitio compatible con todos los navegadores, pero pese a que ¿odiemos? internet explorer, es el rey, y no hay más.
Por cierto, firefox, una pasada los plugins que ofrece tanto a desarrolladores como a seos, y por otra, voy a probar rapidamente la herramienta que comentas para ver las webs en distintas versiones del explorer.
conocía otras, pero esta en concreto no.
Gracias y saludos
Gracias Microsoft por desahuciar al odiado IE6. Ese maldito explorador solo hace quedar mal a los desarrolladores web que trabajamos con Mac.