jquery - 关于 jQuery 选择器的不同浏览器行为

Question

考虑正文中的以下 HTML5 代码:

<p id="p1">
    Email: <input type="text" name="email" /><br />
    Name: <input type="text" name="name" /><br />
    <input type="submit" name="submit" value="Submit" />
</p>
<p id="p2">
    <form action="/index.php">
        Email: <input type="text" name="email" /><br />
        Name: <input type="text" name="name" /><br />
        <input type="submit" name="submit" value="Submit" />
    </form>
</p>

以及以下 JavaScript 代码:

$(document).ready(function() {
    alert("$(#p1 input).length: " + $("#p1 input").length + "\n$(#p2 input).length: " + $("#p2 input").length);
});​

以下是不同浏览器的输出:

Internet Explorer 9.0.8112.16421

$(#p1 input).length: 3
$(#p2 input).length: 3

Chromium 版本 20.0.1132.47 Ubuntu 12.04 (144678)

$(#p1 input).length: 3
$(#p2 input).length: 0

Ubuntu 17.0.1 版 Mozilla Firefox

$(#p1 input).length: 3
$(#p2 input).length: 0

谁能解释一下为什么吗？

http://jsfiddle.net/LKStL/2/

Answer 1

详细阐述我的评论:

p 元素内不允许使用像 form 这样的 block 元素。它是无效的 HTML，因此 jQuery 无法解析它。我只能推测它可能在 Internet Explorer 中工作，因为 Explorer 不遵循 HTML 渲染标准(即:它应该会中断，但没有)。

解决方案:将 form 标记放在 p 之外，或将 p 更改为允许阻止的元素元素，例如 div。