带有可选 </p> 关闭的 IE9 错误

Question

我在 IE9 中尝试了这段代码，但由于标题后缺少</p>，它出乎意料地搞砸了。

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>

这是一个错误还是只是我？

更新

根据 W3C，“p”标签内的块级元素无效

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

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

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

这似乎有效。如果块元素没有像第一个示例中那样显式关闭，它应该自动关闭<p>。

Answer 1

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

我通常可以删除表单前的 P 标签来解决问题。

Answer 2

这似乎是一个 IE9 错误。

在进行更多测试（并在表单中添加一些 <span>s）后，在 IE9 标准模式下，IE9 似乎无法识别 <form> is not allowed 作为 <p> 的后代，但确实认识到<div> 也是不允许的。

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

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

Answer 3

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

正在发生的事情是浏览器是为了符合标准而编写的。标准定义了给定有效 HTML 时的预期行为。当给出损坏的 HTML 时，标准是沉默的，因此如果 IE9 试图纠正丢失的标签，它会假设它属于其他地方，并且 IE9 会错误地显示它。

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

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

Answer 4

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

Answer 5

如果您缺少</p> 之类的内容，旧版本的浏览器不会太在意；他们会尝试修复它。这是一种不好的做法，已经开始被淘汰，因此它在较新的浏览器/HTML 版本中不起作用。