semánticas - html5 nuevos elementos(encabezado, nav, pie de página,...) que no funcionan en IE

section html5 ejemplos

Question

html5 nuevos elementos (encabezado, nav, pie de página, ...) que no funcionan en IE

Answer 1

Actualización: las versiones más nuevas de IE admiten elementos estructurales HTML5 a excepción del elemento ''principal'' más nuevo. Usar un reinicio de CSS que incluya el elemento ''principal'' como normalize arreglará esto. O simplemente puede agregar el siguiente CSS a su proyecto:

    main { display: block;}

Answer 2

Debe incluir el script shiv HTML5 para permitir el diseño de elementos HTML5 en buscadores IE más antiguos: http://code.google.com/p/html5shiv/

Para usar, incluya la siguiente secuencia de comandos en su elemento encima de su CSS:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Answer 3

Otra opción es usar Modernizr , que incluye HTML5 Shiv y también proporciona detección de funciones HTML5.

Los elementos de HTML 5 en IE Modernizr se ejecutan a través de un pequeño bucle en JavaScript para habilitar los diversos elementos de HTML5 (y también abreviados) para el diseño en Internet Explorer. Tenga en cuenta que esto no significa que de repente IE hace compatible el elemento de Audio o Video, simplemente significa que puede utilizar la sección en lugar de div y el estilo en CSS. también es probable que desee configurar muchos de estos elementos para visualizar: bloquear; vea el CSS de Boilerplate HTML5 para un ejemplo. A partir de Modernizr 1.5, este script es idéntico al utilizado en la popular biblioteca html5shim / html5shiv. Ambos también permiten la impresión de elementos HTML5 en IE6-8, aunque es posible que desee probar el rendimiento si tiene más de 100kb de CSS.

Navegadores compatibles Admitimos IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. En dispositivos móviles, admitimos el Safari móvil de iOS, el navegador WebKit de Android, Opera Mobile, Firefox Mobile y, aunque todavía estamos haciendo más pruebas, creemos que admitimos Blackberry 6+. ~ http://modernizr.com/docs/#html5inie

Las siguientes etiquetas al menos: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

Answer 4

Si no te importa un poco el código, solo usa DIVs internos para el diseño.

Estas secciones no se pueden diseñar a través de CSS con IE <9 (sin soporte HTML5). Incluso si pones un atributo de clase dentro de la etiqueta de sección.

<section class="section outer">
    <h1>Level1</h1>
    some text
    <section class="section inner">
        <h1>Level2</h1>
        some more text
    </section>
</section>

Eso es porque IE <9 está matando el anidamiento de etiquetas desconocidas. El DOM se ve así de loco:

 <section class="section outer"></section>
 <h1>Level1</h1>
 some text
 <section class="section inner"></section>
 <h1>Level2</h1>
 some more text
 </section><//section>
 </section><//section>

Pero puede usar DIV como IE <9-Fallback, si no le gusta usar javascript shim. En lugar de diseñar los SECTION, simplemente modele los DIV internos.

<section>
    <div class="section outer">
        <h1>Level1</h1>
        some text
        <section>
            <div class="section inner">
                <h1>Level2</h1>
                some more text
            </div>
        </section>
    </div>
</section>

Por lo tanto, tiene modernas etiquetas HTML5 alrededor para SEO y todo el estilo lo realizan los DIV para cada navegador como de costumbre. Es un HTML5 completo válido y aún funciona si javascript está deshabilitado.

Answer 5

Usa el script que se muestra a continuación ... te ayudará ...

Para cada elemento nuevo que desea que IE <9 reconozca ... añada como se muestra a continuación:

document.createElement ("artículo"); (dentro de la etiqueta de script)
document.createElement ("pie de página"); (dentro de la etiqueta de script)

Gracias

Answer 6

Use HTML5shiv.js o escriba el código de JavaScript en HTML Comentarios condicionales.

<!--this condition is only for IE 8 and lesser browsers.-->

<!--[if lte IE 8]> // lte means LESS THAN & EQUAL TO IE8. 

<script>
document.createElement(''header''); 
document.createElement(''nav''); 
document.createElement(''article'');
document.createElement(''section''); 
document.createElement(''aside''); 
document.createElement(''footer'');
</script>
<style> 
header, nav, article, section, aside, footer{ display:block; } 
</style>

// Ahora estos elementos son compatibles con IE8 y navegadores de menor tamaño.

Answer 7

Debe usar HTML5 Shim . Aquí hay una explicación detallada de por qué esto es necesario.

Para usar HTML5 Shim, solo tiene que agregar lo siguiente en el <head> su página sobre todas sus declaraciones de CSS:

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