富文本排版错乱八成源于box-sizing混用：编辑器容器设border-box，但伪元素及插件节点默认content-box，导致尺寸计算异常；须全局声明*,*::before,*::after{box-sizing:border-box}并前置加载，再针对性覆盖插件样式。
富文本编辑器内容排版错乱，八成不是编辑器本身的问题，而是编辑器容器或其内部节点的 box-sizing 混用导致尺寸计算不一致——尤其当编辑器输出 HTML 片段（含 div、p、blockquote）嵌入到已设 border-box 的页面中时，伪元素、内联样式、第三方插件插入的装饰节点极易漏改，直接引发换行、缩进异常、边框溢出。
为什么富文本容器里写 box-sizing: border-box 还错位
富文本编辑器（如 Quill、Tiptap、CKEditor）通常把内容渲染在 contenteditable 容器内，该容器本身可能被设为 border-box，但编辑器动态插入的节点（比如引用块的 ::before 图标、代码块的 pre::after 复制按钮、高亮行号的伪元素）默认仍走 content-box。一旦这些伪元素带 padding 或 border，它们就额外占空间，而父容器宽度又受限于编辑器 UI 框架（如 Tailwind 的 max-w-4xl），结果就是文字被挤到下一行、列表缩进错位、代码块横向滚动条意外出现。
常见错误现象：
- 引用块左侧装饰线（
blockquote::before）加了border-left: 4px后，整块内容右移 4px - 有序列表项（
ol li）的counter-increment配合::before显示序号，但序号区域因content-box多占宽度，导致文字换行 - 粘贴进来的 Word 内容自带
style="padding: 10px"，若容器是content-box，实际宽 = 声明宽 + 20px，撑破编辑器区域
必须全局覆盖伪元素，且放在 CSS 入口最顶部
只对编辑器容器（如 .ql-editor 或 [contenteditable]）设 box-sizing: border-box 不够。真正起效的是这条规则，它必须出现在所有 CSS 文件加载顺序的最前面（不能塞在某个组件 scoped style 里）：
*, *::before, *::after {
box-sizing: border-box;
}
原因很实在：
-
*::before和*::after不继承父元素的box-sizing，必须显式声明 - 编辑器插件（如语法高亮、emoji 面板、协作光标）插入的装饰节点，90% 是伪元素，漏掉它们就等于留了个“尺寸地雷”
- 某些插件内联样式用
!important覆盖你的局部声明，但全局*选择器权重天然更高（除非插件也用!important）
遇到编辑器自带样式冲突，优先查 Computed 面板再精准覆盖
像 CKEditor 5 的 .ck-content、Quill 的 .ql-editor、Tiptap 的 prose 类，都可能在 JS 初始化时注入带 !important 的样式，强行把某些节点设回 content-box。别急着加更多 !important，先打开 DevTools，选中错位的元素（比如一个错位的 blockquote），在「Computed」面板里搜 box-sizing，看最终值是什么、来源是哪条规则。
实操建议：
- 如果发现是
.ck-content blockquote::before生效了box-sizing: content-box，就单独覆盖：.ck-content blockquote::before, .ck-content blockquote::after { box-sizing: border-box; } - 对
iframe内嵌编辑器（如 TinyMCE），需在 iframe 的 CSS 中也注入相同规则，不能只改外层页面 - 若编辑器支持主题配置（如 Tiptap 的
editor.setOptions({ editorProps: { attributes: { class: "prose prose-sm" } } })），把prose类的样式提前引入，并确保它包含上述全局规则
表单控件和可编辑区域混用时的兼容性陷阱
富文本编辑器常和普通表单（input、select）共存于同一页面。虽然 input 在现代浏览器中已普遍支持 border-box，但以下场景仍要小心：
-
textarea在 Safari 13.1 之前版本对box-sizing: border-box渲染不稳定，光标位置可能偏移；若页面需兼容旧 Safari，建议对textarea单独重置：textarea { box-sizing: content-box; } - 编辑器工具栏按钮（如
.ql-bold）若用了display: inline-flex+padding，而父容器未设border-box，按钮尺寸会膨胀，导致工具栏换行 - 使用
transform: scale(0.9)缩放整个编辑器区域时，border-box计算仍按原始尺寸，视觉上边框变粗、内边距压缩感变强，此时应配合transform-origin: top left并检查line-height是否同步缩放
真正容易被忽略的点：富文本内容里的 img 标签默认是 content-box，如果编辑器允许用户上传并设置 width: 100% + padding: 1rem，那图片实际宽度 = 父容器宽 + 2rem —— 这种错位不会报错，但用户截图发给产品时，第一反应永远是“编辑器 bug”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
