You are on page 1of 7

Solución a los

problemas de
compatibilidad de
IE8 y Firefox 3.6
con HTML5
Eduardo Quintás Serantes

www.krasis.com
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>

www.krasis.com
Este es el aspecto que presenta este código HTML en los navegadores más comunes:

Ilustración 2. En Internet Explorer 8 (y 7,6...)


Ilustración 1. En Internet Explorer 9

Ilustración 4. En Safari 5
Ilustración 3. En Chrome 10

Ilustración 5. En Firefox 3.6 Ilustración 6. En Firefox 4 Beta

www.krasis.com
Este conjunto de ilustraciones produce absoluto pánico. Ante él se entiende que muchos
diseñadores sigan pensando que HTML5 está verde en el pragmático mundo de la web de la
calle, dónde una página tiene que verse bien en prácticamente todos los navegadores del
momento. Pero merece la pena hacer un pequeño esfuerzo por HTML5; entre otras muchas
razones porque las nuevas etiquetas introducen semántica añadida que los navegadores
futuros pueden tener en cuenta para, por ejemplo, mejorar la accesibilidad.

Volviendo a la imagen observamos el desaguisado de Internet Explorer 8: no reconoce el


estilo asociado a las nuevas etiquetas. También observamos que en Firefox 3.6 tampoco se ve
correctamente aunque parece que sí ha aplicado los estilos.

Al igual que Pilgrim en su gran libro, usaré un poco de arte ASCII para ilustrar cómo se han
generado los árboles de documento en IE9 e IE8:

Árbol de documento en IE9 Árbol de documento en IE8 e inferiores


|--HTML
|--HTML +-- HEAD
+-- HEAD |-- BODY
|-- BODY |-- SECTION
|-- SECTION |-- HEADER
|-- HEADER |-- H1
|-- H1 |-- ARTICLE
|-- ARTICLE |-- HEADER
|-- HEADER |-- H1
|-- H1 |-- P
|-- P |-- FOOTER
|-- FOOTER |-- P
|-- P

IE8 en vez de anidar el contenido de etiquetas conocidas dentro de las desconocidas, lo coloca
al mismo nivel, por tanto cualquier estilo asociado a las nuevas etiquetas no será aplicado.

¿Se puede arreglar esto? Pues aunque parezca mentira, la respuesta es sí. Pilgrim nos comenta
que si a través de JavaScript creamos etiquetas con document.createElement, IE8 las reconoce
y genera correctamente el árbol de documento. Remy Sharp ha sintetizado esta solución en
un JavaScript que se pueden cargar condicionalmente en versiones de IE inferiores a la 9. El
proyecto está alojado en Google Project y se llama html5shim.

Se puede descargar el mini .js o simplemente referenciarlo con este comentario condicional
que el resto de navegadores obviarán:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Si incluimos este código en el <head> obtenemos la siguiente página en IE8:

www.krasis.com
Ilustración 7. En IE8 con el script Html5Shiv de creación de etiquetas de HTML5.

Si examinamos el árbol del documento veremos que se han anidado correctamente los
contenidos de la sección, artículo, cabecera y pie. Sin embargo, sigue sin verse
adecuadamente. Si nos fijamos cómo interpreta la página Firefox 3.6 encontramos bastantes
similitudes.

¿Qué está ocurriendo ahora?

Es sencillo. En principio, las nuevas etiquetas estructurales de HTML5, según la W3C, no


deben tener ningún estilo por defecto. Aparte de la semántica que aportan, en lo que
respecta a los estilos se comportan exactamente igual que un <div>. Pero un <div> sí tiene un
atributo CSS definido y es que se muestre como bloque (display: block;)

Así que si incluimos una definición de estilo como esta para todas las etiquetas estructurales
de HTML5, debería quedar solucionado para IE8 e inferiores y Firefox 3.6:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section {
display: block;
}

Ahora nuestra página de ejemplo se vería así en IE8 y Firefox 3.6:

www.krasis.com
Ilustración 8. En IE8 con html5shim y con estilo Ilustración 9. En Firefox 3.6 con estilo de bloque para
de bloque para etiquetas estructurales de etiquetas estructurales de HTML5.
HTML5.

Quizás te hayas fijado en que Firefox 4 el tamaño de los elementos H1 y texto de párrafo son,
por defecto, algo menores que en el resto de navegadores. Si quisiésemos solucionar esto y
prevenir problemas futuros mi recomendación sería hacer un reset de los estilos CSS. Para ello
existen numerosas hojas de estilo que lo hacen. A mí me gusta la de Eric y Kathryn Meyer:
http://meyerweb.com/eric/tools/css/reset/ que ya incluye la definición por compatibilidad con
HTML5.

Acerca del autor


Eduardo Quintás es Senior Development Team Leader en la Universidad de A Coruña así como
Development Advisor at Plain Concepts. Es co-autor del libro “ADO.NET Entity Framework” publicado
por Krasis Press.

Acerca de campusMVP
CampusMVP te ofrece la mejor formación en tecnología Microsoft a través de nuestros cursos online y
nuestros libros especializados, impartidos y escritos por conocidos MVP de Microsoft. Visita nuestra
página y prueba nuestros cursos y libros gratuitamente. www-campusmvp.com

Reconocimiento - NoComercial - CompartirIgual (by-nc-sa):


No se permite un uso comercial de este documento ni de las posibles obras derivadas, la
distribución de las cuales se debe hacer con una licencia igual a la que regula esta obra original. Se
debe citar la fuente.

www.krasis.com