Question

I tried this code in IE9, unexpectedly it got screwed because of a missing </p> after heading.

live demo

<style>
#MyForm div {
    width: 200px;
    height: 30px;
    float: left;
}
</style>
<div>
    <p><b>Login</b>
    <form id="MyForm" action="test.html">
        <div>
            <label>My Email</label>
            <input />
        </div>
        <div>
            <label>My Password</label>
            <input type="password">
        </div>
    </form>
</div>

It is a bug or just me?

Update

A block level element is invalid inside a “p” tag as per W3C

<P>
    <DIV>...</DIV>
</P>

But it’s optional to close <p> tag so,

<p>content block 1
<p>content block 2
<p>content block 3
<form> ..... </form>

This appears valid. A block element should automatically close <p> if it’s not explicitly closed as in first example.

Answer 1

This does appear to be an IE9 bug.

After doing some more testing (and adding some <span>s into the form), in IE9 Standards Mode it looks like IE9 fails to recognise that a <form> is not allowed as a descendent of a <p> but does recognise that a <div> is also not allowed.

Consequently it inserts elements as descendants of the p element node until it encounters the first <div>, at which point it terminates the <form> and the <p> and then inserts the rest of the form body after the form.

When it encounters </form> it treats it as an end tag for a non-open element and ignores it.