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.
buen hack, gracias!
grax, artículo muy práctico y bueno :)
Muchas gracias, en estos momentos voy a realizar una prueba
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.
Realize este procedimiento pero = no se ve bn .. :( .. gracias por el aporte .. :)
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! :)
Perdona, no se lee y no puedo editar, lo separo con espacios:
Perdón por escribir 3 comentarios en un post de hace 6 meses. Saludos!
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.
muy bueno!! esto va a mi biblioteca de hacks!
Necesito de su apoyo, ya intente hacerlo y no pude, sigo sin ver correctamente en IE 7 les dejo el link para descargar los archivos esperando que me puedan ayudar http://www.grupogesi.com/sitearden.zip
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.
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.
Hola Sal, me temo que este script no te sirve… Lo que tu dejaste dos comentarios atrás está hecho con tablas y esto es para compatibilidad de HTML5.
Saludos.
grax, artículo muy práctico y bueno :)
Ey muchas gracias me funciono perfecto!
Y estoy trabajando en Expression Engine
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
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.
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
bueno, ya he probado varias cosas pero no me funciona. Estoy viendo IE7 en playOnLinux pero nada. No me identifica article, aside, section
Hola Jonathan, según comentas tu problema es que no has añadido los estilos CSS que se indican en la entrada.
Saludos.
Muchas gracias! Me funciona en un 90%, solo tengo problemas con el script de un slider.
Excelente información, gracias…
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.
no entiendo mucho de esto, expliquenmelo con manzanas, jajaja gracias
PERDON, me olvide, mi template es News world adaptada a blogger. no es la que esta ahora mismo publicada. saludos
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!
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.
Hola kumon,
con lo que explico en la entrada es suficiente para hacer tu sitio compatible con los navegadores que indicas.
Un saludo.
Hey gracias . Un aporte genial . saludos!!!!!!!!!!!
Hey gracias . Un aporte genial . saludos!!!!!!!!!!!
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.
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
@Andreina, con esa explicación me temo que poco puedo ayudarte.
Saludos.
si me imagino , ya cambie el código y lo unifique todo de todas formas gracias por responderme . suerte .
Muy buen post!
10 puntos
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.
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…
Nada Rutxi, ¡para eso creamos esta web! :)
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
Hola darksvenom,
tu problema no será solucionado con el contenido de esta entrada. Esto es para hacer compatible una web programada con HTML5 en Internet Explorer, nada que ver con Flash.
Lo siento.
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..
hola muchas gracias por tu respuesta darío.
hice dos animaciones en html5. que no se pueden ver internet explorer
con adobe edge.
porke nose nada de programacion web o crear codigo.
http://www.mediafire.com/?g8bkpjkskmpcund
porfavor necesito ayuda y ya no se que hacer .
estare agradecido .
No me va. He incluido el código en el head y al principio de mi css, pero nada y no incluyo tablas en el código.
¿qué hago mal?
Hola Luis, el contenido de la entrada funciona correctamente, asegúrate de seguir los pasos al pie de la letra y funcionará.
Saludos.
interesante post, gracias por tu aporte amigo.
Saludos
Hola,
Preguntas:
con la etiqueta :before también funciona?
Si no es mi intención utilizar bloques puedo utilizarlo de otra manera?
un saludo.-
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.
humm interesante tutorial, esta muy buena gracias por compartir
:)
Excelente, me ha funcionado. Se agradece!
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
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.
Pues no sé, con lo que has añadido debería de bastar.
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?
Revisa bien el contenido de la entrada, el hack sigue funcionando a día de hoy.
Mil gracias!!!! busqué y busqué pero solo esta solución me funcionó, eres el mejor! GRACIAS!!!
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
Hola María, sí se puede. Busca sobre condicionales para Internet Explorer. Yo hace tiempo que no doy soporte más allá de IE8.
excelente artículo y muy claro!!! en dos minutos se ven perfectos todos mis sitios HTML5!
saludos
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.
Hola David, la hoja de estilos es el style.css de tu plantilla (en caso de estar en WordPress). o tu fichero .css.
Buena compadre. Busque por todos lados y nada. Excelente post!! Saludos
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!
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.
Hola Nuria, el código funciona correctamente.