IE9 错误与可选</p>关闭

Question

我在IE9中尝试了这个代码，没想到它因为标题后缺少</p>而被搞砸了。

现场演示

<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>

这是一个bug还是只有我?

根据W3C

，块级元素在"p"标记内无效

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

但是关闭<p>标签是可选的所以，

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

这看起来是有效的。如果block元素没有像第一个例子那样显式关闭，那么它应该自动关闭<p>。

Answer 1

这似乎是IE9的错误。

在做了一些更多的测试(并添加一些<span> s到形式)后，在IE9标准模式下，看起来IE9无法识别<form>不允许作为<p>的后代，但确实认识到<div>也不允许。

因此，它插入元素作为p元素节点的后代，直到遇到第一个<div>，此时它终止<form> 和 <p>，然后在表单之后插入表单主体的其余部分。

当遇到</form>时，它将其视为非打开元素的结束标记并忽略它。

Answer 2

在使用示例Fiddle一分钟后，我可以确认IE9确实有问题。然而，其他浏览器也可能有同样的问题，虽然我还没有确认。问题是IE9认为你在p标签内嵌套一个块级元素(div)。这是不正确的。这就是导致布局错误的原因。我甚至离开了p未关闭，并将div更改为span，它工作得很好。或者，您也可以关闭p标记。

Answer 3

旧版本的浏览器并不关心你是否缺少像</p>这样的东西;他们会试着修复它。这是一种不好的做法，开始被淘汰，因此为什么它不能在较新的浏览器/HTML版本中工作。

Answer 4

虽然我很欣赏John的回答中的讽刺，但要明确的是，这实际上不是浏览器中的错误。

实际情况是浏览器编写时试图符合标准。这些标准定义了当给定有效HTML时的预期行为。当给出破碎的HTML时，标准是沉默的，所以如果IE9试图纠正缺失的标签，它会假设它属于其他地方，IE9会错误地显示它。

你可以通过按F12并更改兼容性设置来强制IE9尝试更正错误的html。

由于您不能期望最终用户同意这样做，因此更好的解决方案是验证您正在生成的HTML。

Answer 5

我定期遇到这个错误。如果您关闭您的P，或者只是删除它们，如果可能的话，表单将正常运行。这个问题很难追踪，因为它可以以许多不同的方式表现出来。最近对我来说，没有视觉渲染提示，但我只在IE9中得到无意义的javascript错误。

我通常能够在我的表单之前删除p标签来解决问题。