嵌套的标签自动关闭/打开

Question

我在嵌套的代码周围看到一些奇怪的行为

鉴于：

<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规范，我应该去哪里尝试并找到正确的行为（除了之外，我不知道任何标签）

不管它值多少钱，我意识到嵌套

编辑：我错了https://jsbin.com/ripaxe/5/edit?html，js，输出。原来innerHTML依赖于浏览器。我不知道。




Answer 1

测试用例使用innerHTML来显示标记的序列化。毫不奇怪，IE的做法与其他浏览器不同，但这两种浏览器对标记的表示本身都是错误的。

Chrome（和Firefox）插入显式

但是不需要显式的结束标记，因此IE简单地选择不插入结束标记来匹配任何开始标记。这并不意味着有任何嵌套正在进行——所有的p元素仍然是兄弟姐妹，您可以通过以下事实来验证这一点：document.query选择器（'p p'）返回null和document.query选择器（'p： nth-child（11）： last-child'）返回由最后一个表示的元素

当然，原始标记中的结束标记是保留的，但是除了第一个结束标记外，其他所有标记都与它们自己的开始标记相匹配（这次不包含空格）的原因在“为什么不匹配”中描述

p元素的结束标记是可选的，这也是为什么两种表示法都是同样有效的（实际上，在功能上是等效的）HTML片段的原因。因此，IE所做的并没有错，但它确实让依赖innerHTML属性的作者感到头疼，因为它做的事情不同。

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

Answer 2

这不是一个错误<代码>

Chrome正试图通过关闭