IE9 bug with optional </p> close

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&开发者_如何学运维gt;

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

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.

After working with the sample Fiddle for a minute I can confirm that IE9 does have a problem with it. However other browsers may also have the same problem, though I have not confirmed. The problem is that IE9 thinks you are nesting a block level element (the div) inside of the p tag. This is not correct. That is what is causing layout errors. I even left the p unclosed and changed the div to a span and it worked just fine. Alternately you could also close the p tag.

Older versions of browsers didn't care so much if you were missing things like </p>; they'd try to fix it up. It's a bad practice that's starting to be stomped out, hence why it's not working in newer browsers/HTML versions.

While I appreciate the sarcasm in John's answer, to be clear, this is not actually a bug in the brower.

What is happening is the brower is written trying to conform to the standards. The standards define expected behavior when given valid HTML. When given broken HTML the standard is silent, and so if IE9 is trying to correct for the missing tag, it is assuming it belongs elsewhere, and IE9 displays it incorrectly.

You can force IE9 to try to correct for bad html by hitting F12 and changing the compatibility settings.

As you cannot expect your end user to go along with this, a better solution is to validate the HTML you are generating.

I periodically run into this bug. If you close your P's, or just delete them if possible, the FORM will behave normally. It can be hard to track down this problem because it can manifest itself in so many different ways. Most recently for me, there were no visual rendering cue, but I was getting nonsense javascript errors in IE9 only.

I'm usually able to just delete the P tag right before my form to fix the problem.