nuevos elementos HTML5 (encabezado, de navegación, de pie de página, ..) no funciona en IE

57

es necesario incluir el guión navaja HTML5 con el fin de permitir que el estilo de elementos HTML5 en navegadores IE mayores: http://code.google.com/p/html5shiv/

de usar, incluyen la siguiente secuencia de comandos en su elemento por encima de la CSS:

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

Fuente

2011-03-08 01:34:39 mVChr

+1

shim? shiv? ¿que esta pasando aqui? –

+5

@Michael Dillon: técnicamente, es una cuña, pero se hizo conocida como la "hiv html5" después de que el término fuera acuñado accidentalmente por John Resig (http://paulirish.com/2011/the-history-of-the- html5-shiv /) – keithjgrant

+1

Gracias por la ayuda, salvó mi vida :) Sin embargo, la fuente code.google original dice "por el bien del rendimiento, tendría más sentido incluir primero el CSS que este script" – army

13

Es necesario utilizar HTML5 Shim. Aquí hay un detailed explanation sobre por qué esto es necesario.

Para utilizar HTML5 Shim, sólo tiene que añadir lo siguiente dentro de <head>, sobre todo, su página Sus declaraciones CSS:

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

Fuente

2011-03-08 01:33:21

+0

¿qué hay de la versión IE 8 y debajo? – dragonfly

+0

@Priya, yup, funciona en todas las versiones de IE. –

10

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

HTML 5 elementos en el IE Modernizr ejecuta a través de un pequeño bucle en JavaScript para permitir a los diversos elementos de HTML 5 (así como abbr) para el peinado en Internet Explorer. Tenga en cuenta que esto no significa que de repente hace que IE soporte el elemento Audio o Video, solo significa que puede usar la sección en lugar de div y darles un estilo en CSS. usted también probablemente quiera configurar muchos de estos elementos para mostrar: bloquear; vea el HTML5 Boilerplate CSS 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 mientras todavía estamos haciendo 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

Fuente

2011-03-08 01:35:43 mpdonadio

-1

Utilice la secuencia dada a continuación ... que le ayudará a ..

Para cada nuevo elemento que desea IE 9 < reconocer .. añada lo siguiente:

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

Gracias

Fuente

2014-04-17 06:39:02 Neethu

-1

Actualización - las nuevas versiones de IE sí apoyan los elementos estructurales de HTML5 con la excepción del elemento más reciente 'principal'. Usar un reinicio de CSS que incluya el elemento 'principal' como normalize lo arreglará.O simplemente puede agregar el siguiente CSS a su proyecto:

main { display: block;}

Fuente

2014-05-14 15:27:50 jbs

1

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 bien, estos elementos apoyará en IE8 y navegadores menores.

Fuente

2016-03-23 07:58:56

0

Si no te importa un poco el código de la sobrecarga, solo utiliza los DIV internos para darle estilo.

Estas secciones no se pueden diseñar mediante CSS con IE < 9 (no es compatible con HTML5). Incluso si coloca 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 el IE 9 < está matando a la anidación de etiquetas desconocidas. El DOM se ve loco como esto:

<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 se puede usar DIVs como un IE < 9-retorno, si no les gusta usar JavaScript de cuña. 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>

Así que tienes modernas HTML5 etiquetas de los alrededores para SEO y todo el estilo es realizado por los DIVs para todos los navegadores, como de costumbre. Es un HTML5 completo válido y aún funciona si javascript está deshabilitado.

Fuente

2016-04-21 00:04:17 SammieFox

nuevos elementos HTML5 (encabezado, de navegación, de pie de página, ..) no funciona en IE

Respuesta

Cuestiones relacionadas