IE 8 Cerrando automáticamente etiqueta

Preguntas WordPress
⏰ 5 minutos de lectura

avatar de usuario
djthoms

Fondo

Actualmente estoy trabajando en el control de calidad final de un sensible sitio web y tengo un problema con IE 8 e IE 7. Mi cliente se ocupa de contratos gubernamentales, por lo que su sitio web debe ser compatible con IE 8 e IE 7. Estoy usando Modernizr con html5shiv integrado. Estoy cargando Modernizr en el pie de página de un tema de WordPress que fue creado a la medida para este proyecto. No me falta un doctype o cualquier otro código obvio.

Estoy usando los siguientes scripts, todos los cuales están cargados en el pie de página de WordPress:

La situación

Tengo un problema con IE 8 que cierra automáticamente un <header> etiqueta. Primero, he usado dos utilidades para verificar este problema:

  1. IETester
  2. IE 11 emulado a IE 8 con agente de usuario de IE 8

Aquí está el salida correcta

<div class="wrapper main-header">
    <header class="container">
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><!--/header-->
</div><!-- /.main-header -->

Lo que IE 8 está representando:

<div class="wrapper main-header">
    <header class="container"></header>
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><//header><!--/header-->
</div><!-- /.main-header -->

lo que he intentado

  • Cargando html5shiv con IE condicional en el <head>
  • Cargando Modernizr en el <head>

He mirado estas preguntas/respuestas de Stackoverflow:

  • html 5 etiquetas de pie de página o encabezado en ie 8 y ie 7
  • html5 no muestra las etiquetas de encabezado en ie
  • Etiquetas de cierre automático de IE 8 automáticamente

¡Cualquier ayuda con esto es muy apreciada! realmente lo haría De Verdad De Verdad gustaría terminar este sitio web durante el fin de semana. Me he estado golpeando la cabeza contra la pared durante las últimas horas por este tema.

Actualizar

Aquí hay algunas imágenes de browsershack para cortar la emulación. Probé el sitio virtualmente con Windows 7 y WIndows XP (IE 8 e IE 7). http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

  • Aquí se analiza un problema similar, stackoverflow.com/questions/18086885/…

    – Vim

    9 de noviembre de 2013 a las 0:04

  • Probé las modificaciones de dom sin éxito. ¡Gracias por la ayuda!

    – djthomas

    9 de noviembre de 2013 a las 0:32

  • no estaría de más use una máquina virtual con una instancia real de IE8. Pasé horas persiguiendo problemas extraños que en realidad no existen pero que se manifiestan cuando ejecuto IEx como IE8. probablemente sea no va a solucionar su problema, pero vale la pena probarlo y saberlo con seguridad.

    – Tim M.

    9 de noviembre de 2013 a las 0:52

  • Recomendación encomiable, usé browserstack.com y sigo viendo el mismo problema en Windows 7 y Windows XP VM con IE 8. ¿Alguna otra recomendación?

    – djthomas

    9 de noviembre de 2013 a las 1:30

  • 9 de cada 10 veces esto se debe a HTML mal formado. El resultado es que IE, en el análisis, construirá el DOM con una etiqueta cerrada prematuramente, mientras que otros navegadores a menudo no mostrarán problemas. Si este HTML se ensambla en partes, puede ser útil mostrar el código original, no el resultado. y modernizar lo hace hay que cargarlo en el <head> para que la navaja funcione. Aunque no creo que esa sea la causa del problema que estás observando.

    – más irónico

    9 de noviembre de 2013 a las 13:04

Se solucionó el problema moviendo Modernizr, jQuery y respond.js al <head> del DOM. ¡Gracias por toda la asistencia!

  • debe marcar esto como la respuesta correcta, para que las personas sepan que la pregunta ha sido respondida.

    – hugo der hungrige

    11 de noviembre de 2013 a las 23:20

avatar de usuario
tierra libre

Una cosa que noté es la <nav> elemento, que no es compatible con IE8 … por lo que tiene sentido que tenga que mover las cuñas y demás en el encabezado.

Pensé que esto podría ser una buena información sobre por qué.

W3C 

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.

Otro artículo de interés, (Historia de HTML5 Shiv) de Paul Irish que afirma “los nuevos elementos no pueden contener niños y no se ven afectados por CSS”, que podría ser la razón por la cual las etiquetas se cierran solas. Esté interesado si alguien puede explicar si este es el culpable.

  • ¡Gracias por información más detallada!

    – djthomas

    14 de noviembre de 2013 a las 3:56

¿Ha sido útil esta solución?