Error IE9 con cierre opcional

Probé este código en IE9, inesperadamente se jodió porque faltaba

después del encabezado.

demo en vivo

  #MyForm div { width: 200px; height: 30px; float: left; }  

Login

Es un error o solo yo?

Actualizar

Un elemento de nivel de bloque no es válido dentro de una etiqueta “p” según W3C

 

...

Pero es opcional cerrar la etiqueta

,

 

content block 1

content block 2

content block 3

.....

Esto parece válido. Un elemento de bloque debería cerrarse automáticamente

si no se cierra explícitamente como en el primer ejemplo.

Esto parece ser un error IE9.

Después de hacer algunas pruebas más (y agregar algunos s en el formulario), en IE9 Standards Mode parece que IE9 no reconoce que un

no está permitido como descendiente de un

pero reconoce que un

tampoco está permitido.

En consecuencia, inserta elementos como descendientes del nodo del elemento p hasta que encuentra el primer

, en cuyo punto termina el

y el

y luego inserta el rest del cuerpo del formulario después del formulario.

Cuando se encuentra con lo trata como una etiqueta final para un elemento no abierto y lo ignora.

Después de trabajar con el Fiddle de muestra durante un minuto, puedo confirmar que IE9 tiene un problema. Sin embargo, otros navegadores también pueden tener el mismo problema, aunque no lo he confirmado. El problema es que IE9 cree que está anidando un elemento de nivel de bloque (el div) dentro de la etiqueta p . Esto no es correcto. Eso es lo que está causando errores de diseño. Incluso dejé el p abierto y cambié el div a un span y funcionó bien. Alternativamente, también podría cerrar la etiqueta p .

A las versiones anteriores de los navegadores no les importaba mucho si te faltaban cosas como

; tratarían de arreglarlo. Es una mala práctica que está empezando a fallar, y por eso no funciona en los navegadores / versiones HTML más nuevos.

Aunque aprecio el sarcasmo en la respuesta de John, para ser claro, esto no es realmente un error en el navegador.

Lo que está sucediendo es que el navegador está escrito tratando de cumplir con los estándares. Los estándares definen el comportamiento esperado cuando se les da HTML válido. Cuando se proporciona HTML roto, el estándar es silencioso, por lo que si IE9 intenta corregir la etiqueta faltante, supone que pertenece a otra parte, e IE9 la muestra incorrectamente.

Puede obligar a IE9 a intentar corregir el html incorrecto pulsando F12 y cambiando la configuración de compatibilidad.

Como no puede esperar que su usuario final esté de acuerdo con esto, una mejor solución es validar el HTML que está generando.

Periódicamente me encuentro con este error. Si cierra sus P, o simplemente las borra si es posible, el FORM se comportará normalmente. Puede ser difícil rastrear este problema porque puede manifestarse de muchas maneras diferentes. Más recientemente, para mí, no había ninguna pista de representación visual, pero estaba obteniendo errores de JavaScript sin sentido en IE9 solamente.

Normalmente puedo eliminar la etiqueta P justo antes de mi formulario para solucionar el problema.