Actuálmente me encuentro maquetando una web en HTML5 y una de las funciones que debemos incorporar a la misma es la carga de módulos de HTML5 vía Ajax con jQuery. Una vez incorporada la he probado como siempre en primer lugar en Firefox y todo perfecto. Como siempre después de firefox viene Internet Exploer y es en este punto donde empiezan los malos rollos . Al pinchar sobre uno de los enlaces del menú de navegación y realizarse la carga, los nuevos contenidos cargados han aparecido sin los estilos aplicados. El problema es que la librera Modernizr que utilizo para generar las nuevas etiquetas HTML5 solo se ejecuta la primera vez que cargamos la página por lo que todo el código que carguemos a posteriori vía Ajax no será reconocido por el navegador y por tanto saldrá sin los estilos asignados en la CSS.

Buscando un poco por Mr. Google he encontrado la librería innerShiv de tan solo 1kb aproximadamente que permite reconocer las nuevas etiquetas HTML5 añadidas al DOM ya sea vía JavaScript o Jquery.

Lo único que hay que hacer para que funcione es insertar la función innerShiv() dentro de la función que vayamos a utilizar para añadir el código ya sea de javascript o Jquery, con la única diferencia de que si utilizamos jquery tendremos que pasar un segundo parámetro a la función innerShiv, más concretamente una variable booleana false.

Os pongo dos ejemplos de como se utilizaría la función con javaScript y con jQuery

Ejemplo javaScript

s.appendChild(innerShiv("<section>Happy section loves CSS. (:</section>"));

Ejemplo jquery

$(this).html(innerShiv(html, false))

Podéis encontrar toda la información sobre la librería creada por joe bartlett en http://jdbartlett.com/innershiv/