Al trabajar con HTML5 hoy en día, muchos de ustedes saben que necesitarán incluir la “cuchilla de HTML5” para asegurarse de que CSS reconozca y pueda diseñar esos elementos en los navegadores que aún no están actualizados con HTML5.
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Gracias por eso a Remy Sharp, Jon Neal, John Resig y cualquier otra persona que contribuyó a esa idea. También para el beneficio de los navegadores que no están de moda, es mejor restablecer muchos de los elementos de HTML5 a nivel de bloque como deberían ser:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }Ahora estamos listos para usar y diseñar elementos HTML5. ¡Pero espera! ¿Qué sucede si agregamos dinámicamente HTML5 a la página a través de JavaScript?
var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);O en jQuery:
$("body").append("<section>Hi!</section>");Los navegadores modernos funcionan bien, pero Internet Explorer una vez más no reconocerá el nuevo elemento y no le aplicará CSS.
Joe Bartlett ha escrito una excelente solución al problema llamada HTML5 innerShiv y pensé que más personas deberían estar al tanto.
Actualización de enero de 2013: ahora se incluye en el proyecto canónico html5shiv, debe usarlo. El resto de este proyecto está un poco desactualizado. Ya no necesita hacerlo de esta manera si usa el html5shiv.
usándolo
Tenga en cuenta que este script no requiere jQuery. Es solo JavaScript estándar y funcionará con cualquier biblioteca o biblioteca.
1. Descargar
Descargue el script e insértelo en su página. O copie y pegue el script en otro JavaScript que ya esté cargando si desea evitar una solicitud HTTP adicional.
2. Envuelva todo el contenido HTML en la función innerShiv antes de insertar
Aquí está el mismo ejemplo de jQuery que el anterior, hecho para funcionar usando innerShiv:
$("body").append(innerShiv("<section>Hi!</section>"));
demostración rápida