Question

我看到围绕嵌套标签的一些奇怪行为。有关测试用例，请参阅this。

假设：

<p>
  <p>
    <p>
      <p>
        <p>
          <p>
          </p>
        </p>
      </p>
    </p>
  </p>
</p>

在Chrome中，结果为

<p>
  </p><p>
    </p><p>
      </p><p>
        </p><p>
          </p><p>
          </p>
        <p></p>
      <p></p>
    <p></p>
  <p></p>
<p></p>

也就是说，它会关闭开始标记并打开结束标记。我（当然）听说过“自闭标签”;我从未听说过“自开标签”。

IE11采用不同的方式（可以说，甚至是wronger）：

<p>
  <p>
    <p>
      <p>
        <p>
          <p>
          </p>
        <p></p>
      <p></p>
    <p></p>
  <p></p>
<p></p>

因此它不会自动关闭开始标记，但它会自动打开关闭标记，从而导致DOM树不平衡。

无论如何，我很好奇解决这个问题的正确途径是什么;我应该在Chrome和IE错误跟踪器上打开问题吗？我不是特别精通W3C规范，我会去哪里尝试找到“正确”的行为（我不知道除以外的任何标记表现出这种行为，尽管我没有'做了大量的测试）？

对于它的价值，我意识到嵌套标签无效;这是我正在努力与他们讨论的第三方图书馆的结果，我发现这是奇怪的行为。）

编辑：我错了IE：见https://jsbin.com/ripaxe/5/edit?html,js,output。结果innerHTML取决于浏览器。没有意识到这一点。

Answer 1

这不是错误。正如您所说，元素不能嵌套在其他元素中。

Chrome正在尝试通过关闭标记来修复您的代码，从而生成此标记。我建议您使用您正在使用的第三方库来提交错误报告，因为这不是特定于浏览器的问题。

Answer 2

您的测试用例使用innerHTML来显示标记的序列化。不出所料，IE倾向于以不同的方式对其他浏览器执行操作，但浏览器的标记表示都不是本身。

Chrome（和Firefox）会插入明确的结束标记，以准确显示每个开始标记的终止位置。每个开始标记在下一个开始标记之前立即终止（最后一个标记除外，它由结束标记终止）。请注意，空格在每对中包含。

但是不需要显式结束标记，并且IE只是选择不插入结束标记以匹配任何开始标记。这并不意味着有任何嵌套 - 所有p元素仍然是兄弟，您可以通过document.querySelector('p p')返回null和document.querySelector('p:nth-child(11):last-child')来验证这一点返回所有浏览器中最后一个结束标记所代表的元素。

原始标记中的结束标记当然会被保留，但是除了第一个结束标记之外的所有标记都与它们自己的开始标记匹配（这次没有包围空格）在Why does a stray end tag generate an empty paragraph?中描述 - 简而言之，HTML5将其与传统浏览器行为保持一致。

p元素的结束标记是可选的也是两个表示同样有效（事实上，功能相同）HTML片段的原因。因此，IE正在做的事情没有任何问题，但它确实给依赖于innerHTML属性的作者带来了麻烦，因为它做的事情不同。

但这就是为什么你不应该依赖innerHTML。

嵌套<p>标签自动关闭/打开

2 个答案: