咨询：mark标签与del/ins标签配合使用的表现是否为正常行为

嘿，这个问题抓得挺准的——我来帮你理清楚为什么会出现这种嵌套表现不一致的情况。

首先，先确认你观察到的核心现象：

• 当mark和b/i这类格式化标签交叉嵌套时，比如你写的：

  <mark><b>Lorem ipsum </mark> amet.</b>
  

  浏览器会自动修正错位的标签结构，最终渲染成类似<mark><b>Lorem ipsum </b></mark><b> amet.</b>的效果，所以“Lorem ipsum ”既被标记又加粗，“amet”仅加粗，完全符合预期。
• 但当mark和del/ins这类带语义的内容修改标签交叉嵌套时，浏览器的处理逻辑就不一样了，表现会和你预期的有出入。

背后的原因：标签语义与浏览器错误修正机制 #

说白了，这两类标签的“身份”不一样，浏览器对它们的错误容忍和修正逻辑也不同：

• b/i是弱语义/无语义的格式化标签，它们的作用只是改变文字样式，没有绑定特定的内容语义。浏览器会优先保证视觉表现的合理性，所以遇到交叉嵌套的错误写法时，会自动拆分标签，把交叉的部分拆成两段独立的格式化内容，让视觉效果符合你的直觉。
• del/ins是强语义的内容修改标签，它们的核心作用是标记一段内容是“被删除”还是“被插入”，浏览器会更注重维护它们的语义完整性。比如如果你写了交叉嵌套的代码：

  <mark><del>Lorem ipsum </mark> amet.</del>
  

  浏览器不会像处理b/i那样拆分del标签，反而可能会把mark整个包裹进del的语义范围里，最终渲染成<del><mark>Lorem ipsum </mark> amet.</del>，导致“amet”也被标记了，和你的预期不符。

正确的写法：避免交叉嵌套 #

要实现“部分内容同时有mark和del/ins效果，另一部分仅保留del/ins效果”，正确的做法是不要交叉嵌套，按照语义范围来拆分标签：

<!-- 正确示例：mark+del的部分，和单独del的部分分开写 -->
<mark><del>Lorem ipsum </del></mark><del> amet.</del>

这样写出来的内容，既符合HTML的语义规范，也能完美实现你想要的视觉效果。

内容的提问来源于stack exchange，提问作者Evaldas Jankus