contenteditable多插槽输入框跨浏览器不一致是因Chrome/Firefox/Safari对编辑容器行为无统一规范：光标定位、行高计算、零宽空格注入等逻辑各异，须显式设置line-height/padding/font属性，禁用white-space:pre-wrap隐式行为，并为contenteditable="false"节点加user-modify+pointer-events+tabindex防护。
直接用 contenteditable 做多插槽输入框，样式在 Chrome/Firefox/Safari 里表现不一致是常态——不是你写错了，而是浏览器对可编辑区域的默认处理逻辑根本不同。
为什么contenteditable区域的光标、行高、内边距总对不上
浏览器对 contenteditable 元素的“编辑容器”行为没有统一规范：Chrome 把它当 div 处理，Firefox 当 body，Safari 则会偷偷注入零宽空格或调整 line-height 计算方式。结果就是同一段 HTML，在三端里光标跳转位置、换行高度、首行缩进全都不一样。
- 必须显式设置
line-height和padding，不能依赖浏览器默认值 - 禁用
white-space: pre-wrap的隐式行为：Firefox 会额外增加换行间隙，Chrome 不会 -
min-height比height更可靠——Safari 对固定height的contenteditable容器有渲染截断 bug - 所有字体相关属性（
font-family、font-size、font-weight）必须声明到容器本身，子元素继承不可靠
contenteditable="false" 的固定插槽在各浏览器中为何表现分裂
嵌套不可编辑节点（如 <span class="mention" contenteditable="false">@user</span>）时，Chrome 允许光标跳过，Firefox 插入零宽空格导致 DOM 污染，Safari 可能完全忽略 contenteditable="false" 并允许编辑。
- 仅靠 HTML 属性不够，必须加 CSS 防护：
.mention[contenteditable="false"] { -webkit-user-modify: read-only; user-modify: read-only; } - Firefox 下需额外补
pointer-events: none防止误点触发 focus - Safari 16.4+ 对
user-modify支持不稳定，建议同时设tabindex="-1"并监听keydown拦截Backspace/Delete - 不要用
disabled属性——它只对表单控件有效，对普通元素无效
如何让 contenteditable 的选区样式跨浏览器一致
::selection 在 contenteditable 区域内本就受限，加上浏览器差异，常出现 Safari 不生效、Firefox 重置颜色、Chrome 忽略 background-color 的情况。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
::selection { color: #fff; background-color: #007acc; }，不能省略任一属性 - 父容器禁用
user-select: none或-webkit-user-select: none，否则 Safari 直接禁用整个 ::selection - 避免在
contenteditable容器上用transform或isolation，Chrome/Edge 下会切断选区样式继承链 - 如果用了 Shadow DOM，
::selection规则必须写在 shadow root 内部，外部全局样式不穿透
真正难的不是写对一行样式，而是所有动态插入的插槽节点、MutationObserver 恢复的内容、甚至光标位置还原逻辑，都得在三端各自跑通一遍——哪怕只漏掉 Safari 对 user-modify 的降级 fallback，用户就会卡死在 @ 用户后无法继续输入。
