如何统一不同浏览器下带inline标签的contenteditable光标行为

推荐两种可落地的实现方案，优先选择无侵入的纯CSS方案： #

方案1：CSS伪元素补位（首选） #

无需修改现有DOM结构，仅通过给目标inline标签添加左右零尺寸的行内块伪元素，即可强制Chromium内核浏览器识别标签边界的光标位置，同时不会干扰Firefox的默认光标逻辑，完全符合需求的统一行为要求。
新增CSS规则如下：

[contenteditable] mark::before,
[contenteditable] mark::after {
  content: '';
  display: inline-block;
  width: 0;
}

完整测试代码：

[contenteditable] {
  padding: 1em;
  border: 1px dashed black;
}

[contenteditable] mark {
  padding: 0.2em;
  border: 1px solid gray;
}

/* 新增光标兼容规则 */
[contenteditable] mark::before,
[contenteditable] mark::after {
  content: '';
  display: inline-block;
  width: 0;
}

<div contenteditable>Here is some <mark>Text</mark> for testing.</div>

该方案在Chrome、Edge、Firefox等主流浏览器下均表现一致，用户可正常通过方向键定位到inline标签的前边界、内部任意位置、后边界。 #

方案2：浏览器分支适配零宽空格 #

如果业务场景必须使用零宽空格实现，可以基于浏览器内核做分支处理，避免Firefox下多按键的问题：

1. 仅在Chromium内核浏览器（Chrome、Edge等）中插入零宽空格
2. Firefox下直接使用原生默认逻辑，不插入零宽空格
   UA检测参考逻辑：

const isChromium = /Chrome|Edg/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);

// 生成inline标签时的处理逻辑
function generateMarkTag(text) {
  if (isChromium) {
    return `<mark>\u200B${text}\u200B</mark>\u200B`;
  }
  return `<mark>${text}</mark>`;
}

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