巢状 <p> 标签自动关闭/打开

Question

我看到嵌套<p>标记周围有一些奇怪的行为。 请参阅此测试用例。

鉴于：

<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采取了不同的方式（甚至可以说是错误的）：

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

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

无论如何，我很好奇解决这个问题的正确方法。 我应该在Chrome和IE错误跟踪器上打开问题吗？ 我对W3C规范并不特别精通，在哪里可以尝试找到“正确的”行为（除了<p>之外，我还没有其他标签可以显示这种行为，尽管我还没有做过广泛的测试）？

对于它的价值，我意识到嵌套<p>标签是无效的； 这是由于我正在与第三方图书馆打交道，我只是发现这是一种奇怪的行为）。

编辑：我对IE的看法是错误的：请参阅https://jsbin.com/ripaxe/5/edit?html,js,output 。 事实证明innerHTML是依赖于浏览器的。 没意识到。

Answer 1

这不是错误。 <p>元素不能嵌套在其他<p>元素中。

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

Answer 2

您的测试用例使用innerHTML来显示标记的序列化。 毫不奇怪，IE往往在做事上与其他浏览器有所不同，但是浏览器对您标记的表示本身都不对。

Chrome浏览器（和Firefox）插入明确的</p>结束标记，以准确显示每个<p>起始标记的终止位置。 每个开始标记都在下一个开始标记之前终止（最后一个标记除外，后者由其结束标记终止）。 请注意，空格包含在每对中。

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

当然，保留了原始标记中的结束标记，但是，除了第一个结束标记之外，所有其他标记都与它们自己的开始标记（这次不包含空格）相匹配的原因在为何会迷路</ p>中进行了描述。 结束标记会生成一个空段？ —简而言之，HTML5规定它与旧版浏览器行为保持一致。

p元素的end标记是可选的，这也是两个表示形式均有效（并且实际上在功能上等效）HTML片段的原因。 因此，IE所做的事情没有错，但是它确实使依赖innerHTML属性的作者感到头痛，仅仅是因为它的行为有所不同。

但是，这就是为什么您不应该依赖innerHTML的原因。