Sie sind auf Seite 1von 7
 
 
Solución a los problemas de compatibilidad de IE8 y Firefox 3.6 con HTML5
 
Eduardo Quintás Serantes
 
 
SOLUCIÓN A LOS PROBLEMAS DE COMPATIBILIDAD DE IE8 Y FIREFOX 3.6 CON HTML5
Nivel: Intermedio
 
por
Eduardo Quintás Serantes
 En muchos blogs encontramos artículos que hablan de las nuevas características de HTML5 con Internet Explorer 9. Quienes ya hayan cacharreado un poco puede que se hayan topado con un pequeño problema de interpretación de HTML5 con Internet Explorer 8, Firefox 3.6 y otros navegadores, que si bien no son las últimas versiones, son las penúltimas y siguen siendo muy comunes en el escritorio de muchos usuarios. Siendo prácticos IE8 y FF 3.6 seguirán existiendo a medio plazo, hasta que la mayoría de usuarios se actualicen, por lo que es más que interesante que nuestra web en HTML5 se muestre correctamente en este navegador. El principal problema es que IE8 no reconoce las nuevas etiquetas de estructura de HTML5
(<section>, <article>, <footer>, <nav> …) y ante una etiqueta desconocida IE8 tiene un
comportamiento realmente extraño cuando genera el árbol del documento.
Mark Pilgrim
 lo comenta en su estupendo libro
HTML5 Up And Running
. En resumen, nos comenta que IE8 e inferiores ante una etiqueta con cierre desconocida la coloca en el árbol del documento al
mismo nivel que sus contenidos, en vez de anidar sus contenidos… como esto es difícil de
digerir en texto veámoslo con un ejemplo. Supongamos el siguiente documento HTML5 que define una <section> y que a su vez contiene una serie de <article> con <header> y <footer> en el interior. Además hay unos cuantos estilos para comprobar cómo se aplican a las nuevas etiquetas estructurales de HTML5:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html"> <title>Test</title> <style type="text/css"> #Posts header { border:1px solid blue; padding: 1em; } #Posts header h1 { color: blue; } #Posts article { border:1px solid green; padding: 1em; } #Posts article header { border:1px solid red; padding: 1em; } #Posts article header h1 { color: gray; } #Posts article p { font-weight: bold; } #Posts article footer { border:1px solid red; padding: 1em; } #Posts article footer p { color: gray; } </style> </head> <body> <section id="Posts"> <header> <h1>T&iacute;tulo del Blog</h1> </header> <article> <header> <h1>T&iacute;tulo del post</h1> </header> <p>Texto del post, blah, blah, blah ...</p> <footer> <p>Pie del post</p> </footer> </article> </section> </body> </html>
 
 
Este es el aspecto que presenta este código HTML en los navegadores más comunes:
Ilustración 1. En Internet Explorer 9 Ilustración 2. En Internet Explorer 8 (y 7,6...) Ilustración 3. En Chrome 10 Ilustración 4. En Safari 5 Ilustración 5. En Firefox 3.6 Ilustración 6. En Firefox 4 Beta

Ihre Neugier belohnen

Alles, was Sie lesen wollen.
Jederzeit. Überall. Auf jedem Gerät.
Keine Verpflichtung. Jederzeit kündbar.
576648e32a3d8b82ca71961b7a986505