html - 浏览器如何将某些标签处理为 "allow overlap"，将其他标签处理为 "do not allow"

Question

<br><b>ABCDEF<u>GHJIKLOM</b>PQRST</u>UVWXYZ
<br><b>ABCDEF<ins>GHJIKLOM</b>PQRST</ins>UVWXYZ

看看第一个示例中下划线如何向下延伸至 T，而在第二个示例中下划线突然以 M 结束。但代码基本上是相同的，除了 u 应该改变特定的外观，而 ins 只是提示文本已插入并且应该标记为“某种方式”，好吧被标记为下划线。经验告诉我，这肯定没问题，但我只是想知道为什么有些标签允许与其他标签重叠，而与其他标签配对则不允许重叠？浏览器中是否有一个配对表？或者某些标签被标记为“重叠友好”？这是为什么？

Answer 1

这两个片段都无效。浏览器必须根据您的输入重建有效的 DOM 树；在这两种情况下，最终结果是:

<b>
    ABCDEF
    <u>
        GHJIKLOM
    </u>
</b>
<u>
    PQRST
</u>
UVWXYZ

和

<b>
    ABCDEF
    <ins>
        GHJIKLOM
    </ins>
</b>
PQRSTUVWXYZ

控制从无效 HTML 输入中恢复的算法在 section 12.2.3.3 ("Parse state") of the HTML5 standard 中指定。 .

造成结果差异的具体原因是 <ins>标签不被 HTML5 分类为格式化元素，而 <b>和<i>是。 (格式化元素的完整列表给出 in section 12.2.3.2 ，并且非常小。)这会导致 <ins>当它被另一个结束标签“中断”时，不会重新打开。