Solucionar problemas compatibilidad IE8 (IE7,IE6) con HTML5

Hace unos días que hice mi primer sitio web en HTML5 y, para mi sorpresa, resultó ser más sencillo de lo que creía.

El problema llegó cuando no podía visualizar correctamente el sitio en Internet Explorer 8 (y, por consiguiente, en versiones anteriores).

Indagando por internet, dí con una pequeña fórmula para dar solución a esto; pero primero veamos el error.

El error concreto es que IE8 (aka Internet Explorer 8) era incapaz de visualizar mi sitio con CSS o Javascript; interpretaba el HTML (de aquella manera) pero no los estilos o scripts que le daban forma, color y funcionalidad.

Como digo, indagué un poquillo y encontré la solución en scribd donde lo que hacen es lo siguiente:

Primero agregan un condicional HTML para incluir un código JavaScript que sólo interpretarán las versiones anteriores a Internet Explorer 9:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->

También se puede descargar el script de esta url. Yo, por reducir el consumo de tráfico de mi blog he decidido implementarlo directamente desde googlecode.

La segunda parte es obligar a Internet Explorer que muestre las nuevas etiquetas HTML5 como bloques, ya que no las interpreta como tal y ahí reside parte del problema:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display: block;
}

Esto deberemos insertarlo al principio de nuestra hoja de estilos.

Con esto nuestro sitio HTML5 se verá perfectamente en todos los navegadores*.

*Probado en Internet Explorer 7 y 8.

65 comentarios en “Solucionar problemas compatibilidad IE8 (IE7,IE6) con HTML5

  1. Fenomenal!! Ha funcionado!

    Hice un theme de Wordpress a partir del framework Starkers, que viene a pelo con la estructura, así que maqueté desde 0. Una vez terminado, le pasé el validador de html, encontró sólo 8 errores, y pensé, bueno seguro que sale bien en IE. Pues nada más testar la web en IE se me descuadró por completo. Ya me veía perdiendo una tarde entera para arreglaro, googleo, entro y lo pones así de fácil! Ni 10 minutos entre buscar y cambiar.

    Peeeero, y es que siempre hay un pero en todo, me sale un pequeño problemita en IE (todavía). En la versión 8. Aparece todo el sitio corrido una línea abajo y en la parte superior derecha se puede leer " --> " que es la parte final del comentario de Javascript.

    ¿Cómo lo hago para que no se vean estos carácteres y el diseño se vuelva a alinear arriba? Muchas gracias! Me has ahorrado horas.

  2. Uy, ya encontré la solución. Tal y como está puesto el código aquí no funciona correctamente, funciona pero añade el error que mencioné. La etiqueta de cierre es:

    Saludos! :)

    1. Exacto, el cierre de la etiqueta condicional es < ![endif]-- > (sin espacios); se ve que al editor de wordpress no le gusta demasiado.

      Lo reparo en la entrada.

      Me alegra haberte ayudado.

    1. Recuerda que son 2 cosas las que debes hacer: Incluir el script JS para la compatibilidad y modificar los CSS para las nuevas etiquetas (al inicio de tu CSS).

      Saludos.

  3. Gracias por tu respuesta Dario, ya lo hice pero no me foncionó, si puedes descargar el zip en la liga anterior, quizas me puedas apoyar, en firefox, safari y chrome, se visualiza correctamente.

  4. hola que tal, mira tengo un problema que ya no se como solucionarlo, te comento que compre un theme y cuando lo descargue me doy cuenta que solo se ve bien en firefox, en IE y demas navegadores se desorganiza todo y falta informacion, hable con el soporte y justamente me informan que no dan soporte, que ellos solo venden los templates,
    se suponia que al descargarlo solo tenia que modificar las imagenes y textos pero veo que no es asi y esto es un timo, por favor alguien puede ayudarme tengo el zip como se descargo de la web, tambien me lo volvieron a enviar por mail y hace lo mismo, me gaste el poco dinero que tenia en esta plantilla y la verdad que la necesito urgente, algun alma caritativa que pueda ayudarme con esto por favor, la plantilla tiene css y html tambien hay archivos en js y ahi me eh perdido, no logro que se vea bien en los otros navegadores tengo pocos conocimientos y la verdad que me hace falta terminar esta web soy una tonta por creer que no me estafarian los de monster y al final me estafaron. desde ya gracias
    PD. si quieren puedo subir el archivo a algun servidor para que lo vean y me digan si es posibe arreglar esto!! gracias chicos por todo, que seria de nosotras sin ustedes

    aqui les dejo el link gracias
    http://uploaded.to/file/goj029qt

    1. Hola la popi,
      Me temo que no podemos ayudarte más que lo hemos hecho en la entrada en la que comentas.

      Lo que pides es una maquetación crossbrowsing; en este caso adaptar una maqueta ya hecha. Lo mejor será que contrates los servicios de un profesional para un buen resultado.

      Saludos.

  5. adaptar a cada navegador dices?? ok gracias igualmente, crei que era el mismo problema que tenian ustedes, ya que en firefox se ver perfectamente, pero veo que no es el mismo problema entonces... bueno ya vere como me busco la vida, seguire buscando en internet, gracias igualmente

  6. bueno, ya he probado varias cosas pero no me funciona. Estoy viendo IE7 en playOnLinux pero nada. No me identifica article, aside, section

  7. Tengo esta plantilla instalada, es gratuita adaptada a blogger, me funciona bien en chrome pero en explorer se ve desorganizada. que puedo hacer para verla bien en el explorador mas popular (explorer) necesito ayuda por favor. saludos a todos.

    1. Hola Jorge,
      me temo que no podemos ayudarte con plantillas de Blogger (no estamos muy puestos en ese aspecto), pero el tutorial está hecho de manera realmente sencilla y deberías comprenderlo.

      Te invito a que lo leas e intentes de nuevo.

      ¡Saludos!

  8. Hola muchas gracias por compartir tu conocimiento. He probado de muchas formas distintas y no logro hacer que funcione html 5 y css3 en IE7 y 8, no me respeta el formato, no funcionan los submenus y ya me comienzo a desesperar, este es el sitio web (http://psicovalia.com/) ojalá me puedan ayudar, gracias de antemano.

  9. LA POPI, sobre el template que has comprado, solo tienes que quitar el código que viene en la cabecera hasta DOCTYPE en cada página, todo funcionará bien, excepto un pequeño error en el logo Overlay.

    Un saludo.

  10. Hola una pregunta , el código me funciona perfecto solo que la etiqueta nav se repite mas arriba en internet explore ... imagina tener un header en un color y los nav en otro solo que internet explorer se doble y salen dos rayas espantosas que puedo hacer . gracias

  11. Grácias, de verdad, cuando abrí IE8 para ver como iba quedando, me quedé parado pensando... no acepta html5...
    pero gracias por compartir ese script para que pueda interpretarlo.

  12. Un millón de gracias!!! Me has salvado de hacer un CSS especifico para IE8 y me has alegrado el día ;)
    PD: odio a la gente que sigue utilizando explorer y además se han quedado estancados en el 8...

  13. gracias por tu conocimiento te queria decir nose mucho de programacion pero si se flash cs6
    entonces qye pasa que hice una animacion simple de logo y lo exporte a html.
    pero no se pude visualizar en internet explorer queria saber si este metodo sirve para mi problema

  14. muchas gracias darío por tu respuesta empese a estudiar animacion pero tenia dificultades u_u. bueno por fin hise mi primera animacion en html5 pero nose ve en internet explorer .
    el detalle es que nose nada de codigos o de estilos y nose como crear o añadir eso para que se vea en el internt explorer.
    estaria muy agradecido si me ayudan en este problema..

  15. Hola,

    Preguntas:
    con la etiqueta :before también funciona?

    Si no es mi intención utilizar bloques puedo utilizarlo de otra manera?

    un saludo.-

    1. Hola, esta entrada es aplicativa a las nuevas etiquetas HTML5, el :before es un pseudoelemento CSS, nada que ver.

      En cuanto a la segunda pregunta, no la he entendido del todo.

      Saludos.

  16. buenas, utilice el código pero aun así IE8 y los demás siguen sin verse como en IE9
    el archivo html5shiv.js esta en la carpeta js... y el código ese esta debajo de los estilos, coloque article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display: block;
    } al principio del CSS y si, en efecto, me bloqueo todos los componentes... .-. pero no veo ningún cambio en IE8, que me faltará? :O

  17. Hola. Utilicé el hack y todo salió de maravilla excepto por los videos. Agregué "video" al "display: block;" para contar con la etiqueta y se ve así:

    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,video{
    display: block;
    }

    Sin embargo, mis videos no se ven. Alguna idea?

    Saludos.

  18. tengo un sitio web, el cual abre bien en mozilla y firefox pero en ie678 no funciona bien, instale el 10 y lo abre bien, probe poner este codigo y sigue funcionando mal en versiones antiguas de IE.
    alguna solucion?

  19. Hola Darío:
    Gracias por tu aporte. Me ha funcionado perfectamente.
    A mí también me has ahorrado quebraderos de cabeza.
    Por cierto ¿sabes si se puede personalizar el CSS para determinado navegador? Lo digo para eliminar por ejemplo un slider y que no se vean las imágenes en IE6, que aparecen todas seguidas.
    Enfín, ahí lo dejo.
    Saludos

  20. Hola Darío, perdona mi ignorancia pero llevo apenas 1 semana comenzando con mi blog y no sé donde comienza el principio de la hoja de estilo que indicas donde debo situar el segundo código que comentas. ¿Con qué etiqueta comienza la hoja de estilo? Muchas gracias.

  21. Pufff! me has salvado de una buena!
    Mil gracias por compartir esta información. No se contemplaba el desarrollo para ie8 del Wordpress cuando se habló con el cliente y ahora derrepente lo quiere si o si... gran aporte!

  22. Hola, he probado todo lo que dices, para el script en la pagina se me vé --> al prncipio de todo y respecto a las etiquetas nav, article...no me funciona, ¿me puedes ayudar? muchas gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información