应优先引入 normalize.css 并置于样式表最前，再对 contenteditable 区域用 dom 操作清洗内联样式、移除冗余标签，并为表单控件统一重置 appearance 及关键渲染属性。
浏览器默认样式不是“编辑器”能清除的——HTML 编辑器（比如 contenteditable 区域）本身不提供样式重置能力，它只负责渲染和交互；真正起作用的是 CSS 层级控制与 DOM 操作策略。
用 normalize.css 替代通配符重置
直接写 * { margin: 0; padding: 0; } 看似简单，实则破坏表单控件、标题层级和可访问性：input 失去内边距、button:focus 轮廓消失、h1–h6 全部退化为相同字号。更糟的是，它强制浏览器对每个节点做通配匹配，DOM 节点超 2000 个时 CSSOM 构建明显变慢。
你应该在项目入口 CSS 的最顶部引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
它不归零，而是修复差异：ul/ol 保留语义缩进、button 和 input 在各浏览器中尺寸一致、code/sub/sup 维持排版语义。关键在于——它必须放在你自己的样式之前。
针对 contenteditable 区域单独处理
即使用了 normalize.css，contenteditable 内粘贴富文本仍会带入冗余 style 属性、空 span、嵌套 font 标签。这些 document.execCommand 完全不管——removeFormat 只删它自己插的标签（如 <strong></strong>），对 style="margin:10px; color:red;" 无感。
真正清洗要绕过 execCommand，直接操作 DOM：
- 用
document.querySelectorAll('[contenteditable] *[style]')找出所有带内联样式的子元素 - 对每个元素调用
el.getAttribute('style')，再用正则提取白名单属性，例如：/(color|font-family|text-align|line-height)\s*:\s*[^;]+;/gi - 清洗后若结果为空字符串，必须用
el.removeAttribute('style')，而非el.setAttribute('style', '')或el.style.cssText = '' - 配合
element.normalize()合并空文本节点，再手动移除孤立的span或font
按钮与表单控件需显式重置 appearance
如果你的编辑器里包含自定义工具栏按钮（比如 <button></button> 或 <input type="button">），仅设 border: none; background: transparent; 不够——Chrome/Safari/Firefox 渲染原生控件逻辑不同，漏掉任一前缀都会残留圆角或阴影。
必须三者共存：
button, input[type="button"], input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
同时补上关键渲染属性：
-
display: inline-block（all: unset会干掉它） box-sizing: border-boxcursor: pointer-
vertical-align: middle（避免和文字基线错位）
复杂点在于：样式重置不是越“全”越好，而是越“准”越稳；最容易被忽略的是——normalize.css 必须加载在最前，且不能被后续规则覆盖；而 contenteditable 内的样式污染，只能靠 DOM 字符串级清洗，没有捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
