jQuery outerHeight devuelve un valor incorrecto IE

Question

Estoy intentando obtener la altura de un elemento en una página. Obtengo el valor esperado (aproximadamente 700px) en FF y Webkit en Mac, pero obtengo un valor de 0 en IE8. No he probado versiones anteriores de IE todavía.

html:

<section> 
    <article> 
    ... 
    </article> 

javascript:

var height = myElement.outerHeight(true); 

Hay una serie de cosas que podrían estar complicando esto.

1. Estoy intentando medir el elemento de inmediatamente después de que es dinámicamente añade a la página (el elemento es añade como el resultado de una ajax petición),
2. el elemento que estoy tratando de La medida es un elemento html5 (sección).

Una cosa que he notado es que los elementos html5 insertados están mal formateados cuando se ven usando herramientas de desarrollador. Obtengo cosas como </article/>. Todo lo que era parte de la página cuando se carga se ve bien.

Algunas cosas que he intentado en el intento de resolver el problema:

1. He añadido CSS para aplicar display: block a todos los elementos de HTML5
2. que he añadido de Remy Sharp "html5 permitiendo la escritura" (http://remysharp.com/2009/01/07/html5-enabling-script/)
3. estoy usando
4. he intentado usar todos los divs en lugar de elementos HTML5
5. myElement.height() devuelve un valor de 'auto' en IE8 mientras que en otros navegadores obtengo un valor de píxel. innerHeight() devuelve null.

Gracias

Answer 1

Una cosa que he notado es que los elementos html5 insertados están mal formateados cuando se ven usando herramientas de desarrollador. Consigo cosas como </article/>

Eso no es mala formato, eso es las herramientas de desarrollo que le dice exactamente lo que el IE DOM se parece.IE no puede analizar correctamente los elementos HTML5, lo que da como resultado que los elementos no estén donde usted los esperaba y, por lo tanto, la altura y la representación no coincidan con lo que esperaba.

Lo que pasa es que IE trata a elementos desconocidos como siendo siempre los elementos con el modelo EMPTY contenido: elementos como <img/> o <br/> que no tienen un primer etiqueta (que requiere la sintaxis de cierre automático en XHTML). Entonces cuando IE ve <section>, crea y cierra un elemento section. Luego, el siguiente elemento, <article>, viene después de<section/> y no dentro de él. Cuando IE ve </section>, cree que no es una etiqueta cerrada, sino una etiqueta vacía cuyo nombre es /section (que, por supuesto, no es válido, pero ¿cuándo le ha importado IE?).

Así que la altura del elemento <section/>, que no contiene nada, probablemente será cero, y si pone un fondo en ese fondo no abarcará el <article/>.

Como se mencionó Nick, el html5shiv puede solucionar algunos de estos problemas mediante el uso de createElement para engañar temporalmente IE para que piense que sabe que <section> es un elemento real. Sin embargo, esto realmente no cubre todo el problema, ya que cuando comienzas a perder el tiempo con otras operaciones de análisis como configuración innerHTML, volverá a funcionar mal. La siguiente etapa es tratar de solucionar esto con el innershiv; Hay algunas desventajas de rendimiento en esto, así que asegúrese de usarlo solo en IE, y solo cuando lo necesite (no es tan robusto como la interfaz html() de jQuery).

Personalmente, no veo mucho beneficio para todos estos problemas. Por ahora, <section/> realmente no le ofrece nada que no sea <div class="section">. En el futuro, puede haber herramientas que puedan hacer algo con la semántica, y hacer que los sitios se vean completamente bien en IE6-8 no importará. Pero ese día está muy lejos de la OMI.

Answer 2

IE8 simplemente no es compatible con estos elementos ... aunque intenta representar correctamente, una serie de funciones no volverá correctamente incluyendo dimensiones.

Esto es solo una diferencia entre los navegadores que admiten los elementos y navegadores anteriores a ellos, puede probar su suerte con algunas bibliotecas de soporte HTML5 como HTML5 Shiv, esa es su mejor opción aquí.