嵌套< p>标签自动关闭/打开 [英] Nested <p> tag auto-closing/opening

问题描述

我在嵌套的< p> 标签周围看到了一些奇怪的行为。有关测试用例，请参阅这个。

鉴于：

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

在Chrome中，这会导致

 < p为H. 
< / 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 bug跟踪器上打开问题吗？我对W3C规范并不十分熟悉，我会去哪里去尝试找到正确的行为（我不知道除了< p> 表现出这种行为，尽管我还没有做过广泛的测试）？



值得一提的是，我意识到嵌套< p> ; 标签无效;这是一个第三方库的结果，我正在努力解决他们，我只是发现这是奇怪的行为）。



编辑：我错了关于IE ：请参阅 https://jsbin.com/ripaxe/5/edit?html， JS，输出。结果 innerHTML 与浏览器相关。没有意识到这一点。

解决方案

您的测试用例使用innerHTML来显示标记的序列化。不出所料，IE浏览器往往会对其他浏览器的做法有所不同，但浏览器对标记的表示方式本身并不错。 。 Chrome浏览器（和Firefox）插入明确的< / p> 结束标签以准确显示每个< p> 开始标签终止的位置。每个开始标记在下一个开始标记之前立即终止（除了最后一个标记以结束标记终止）。请注意，每对中的空格都包含在中。

但不需要显式结束标记，IE只是选择不插入结束标记为了这个原因匹配任何的开始标签。这并不意味着有任何嵌套 - 所有的 p 元素仍然是兄弟，你可以用 document.querySelector（'p p'）返回null和 document.querySelector（'p：nth-​​child（11）：last-child'）返回所有浏览器中最后一个< / p> 结束标记所代表的元素。

结束当然，原始标记中的标记会被保留下来，但除了第一个结束标记与其自身的开始标记匹配（没有此时将包围空白）之外的原因在 - 简而言之，它是由HTML5支持与传统浏览器行为一致的。

p 元素是可选的，这也是两种表示都同样有效（并且实际上在功能上等同于）HTML片段的原因。因此，IE在做什么并没有什么错，但它确实会让依赖innerHTML属性的作者头疼，因为它的行事方式不同。

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

I'm seeing some weird behavior around nested <p> tags. See this for the test case.

Given:

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

In Chrome, this results in

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

That is, it closes opening tags and opens closing tags. I've heard (of course) of "self-closing tags"; I've never heard of "self-opening tags".

IE11 does it a different (and arguably, even wronger) way:

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

So it does not auto-close opening tags, but it does auto-open close tags, resulting in an unbalanced DOM tree.

Anyway, I'm curious what the proper path to address this; should I open issues on Chrome and IE bug trackers? I'm not particularly well versed in the W3C specs, where would I go to try and find the "correct" behavior (I'm not aware of any tags apart from <p> that exhibit this behavior, although I haven't done extensive testing)?

For what it's worth, I realize nesting <p> tags is invalid; this is a result of a third party library that I am working to address with them, I just found this to be bizarre behavior).

EDIT: I was wrong about IE: see https://jsbin.com/ripaxe/5/edit?html,js,output. Turns out innerHTML is browser dependent. Didn't realize that.

解决方案

Your test case uses innerHTML to display the serializations of your markup. Unsurprisingly IE tends to do things differently to other browsers, but neither browser's representation of your markup is wrong per se.

Chrome (and Firefox) inserts explicit </p> end tags to show exactly where each <p> start tag terminates. Each start tag terminates immediately before the next start tag (except the last one, which is terminated by its end tag). Notice that the whitespace is enclosed within each pair.

But the explicit end tags are not needed, and IE simply chooses not to insert end tags to match any of the start tags for that reason. That doesn't mean that there is any nesting going on — all of the p elements are still siblings, and you can verify this with the fact that document.querySelector('p p') returns null and document.querySelector('p:nth-child(11):last-child') returns the element represented by the very last </p> end tag in all browsers.

The end tags that are in your original markup are preserved, of course, but the reason all but the first end tag are matched with their own start tags (without enclosing the whitespace this time) is described in Why does a stray </p> end tag generate an empty paragraph? — in short, it's specced by HTML5 for consistency with legacy browser behavior.

The end tag for the p element being optional is also the reason why both representations are equally valid (and, in fact, functionally equivalent) HTML fragments. So, there is nothing wrong with what IE is doing, but it does create headaches for authors relying on the innerHTML property simply because it does things differently.

But this is why you shouldn't rely on innerHTML.

这篇关于嵌套&lt; p&gt;标签自动关闭/打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！