巢狀 <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的原因。