• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
 
Solución a losproblemas decompatibilidad deIE8 y Firefox 3.6con HTML5
 
Eduardo Quintás Serantes
www.krasis.com
 
 
www.krasis.com
SOLUCIÓN A LOS PROBLEMAS DE COMPATIBILIDAD DE IE8 Y FIREFOX 3.6CON HTML5
Nivel: Intermedio 
 
por
Eduardo Quintás Serantes
 En muchos blogs encontramos artículos que hablan de las nuevas características de HTML5con Internet Explorer 9. Quienes ya hayan cacharreado un poco puede que se hayan topadocon un pequeño problema de interpretación de HTML5 con Internet Explorer 8, Firefox 3.6 yotros navegadores, que si bien no son las últimas versiones, son las penúltimas y siguen siendomuy 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 deusuarios se actualicen, por lo que es más que interesante que nuestra web en HTML5 semuestre 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
locomenta en su estupendo libro
HTML5 Up And Running
. En resumen, nos comenta que IE8 einferiores 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 contieneuna serie de <article> con <header> y <footer> en el interior. Además hay unos cuantos estilospara 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>
 
 
www.krasis.com
Este es el aspecto que presenta este código HTML en los navegadores más comunes:
Ilustración 1. En Internet Explorer 9Ilustración 2. En Internet Explorer 8 (y 7,6...)Ilustración 3. En Chrome 10Ilustración 4. En Safari 5Ilustración 5. En Firefox 3.6Ilustración 6. En Firefox 4 Beta
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...