I tried this code in IE9, unexpectedly it got screwed because of a missing </p>
after heading.
<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.
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.