Pues yo voy a insistir con que el error es en usar <header> que, de nuevo, es una etiqueta perteneciente a HTML5. Si uno intenta con jQuery en IE tratar de obtener un elemento que no está definido, IE da el error:
Cita: [IE8] Mensaje: Llamada inesperada a un método o a un acceso de propiedad.
Ejemplo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$('header').html('header: <p>En IE no se lee este texto</p>');
$('section').html('section: <p>En IE no se lee este texto</p>');
});
</script>
</head>
<body>
<header></header>
<section></section>
</body>
</html> Eso funciona en la mayoría de los navegadores modernos pero
NO FUCIONARÁ en IE, pues jQuery no puede obtener el elemento HEADER. Es
incorrecto utilizar esos elementos con ese DOCTYPE.
Si vas a utilizar elementos de HTML5 en navegadores obsoletos (más precisamente IE) podés usar este método:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$('header').html('header: <p>En IE no se lee este texto</p>');
$('section').html('section: <p>En IE no se lee este texto</p>');
});
</script>
</head>
<body>
<header></header>
<section></section>
</body>
</html> Observá el código condicional para IE y el cambio del DOCTYPE. Eso SI FUNCIONA en IE (IE6 para arriba).
Probá cambiando el DOCTYPE y utlizando el html5.js como te he mostrado. Es más correcto.
Un saludo.