Firefox 自2020年起彻底禁用 document.execCommand,调用即抛 TypeError 错误;替代方案为手动 DOM 操作或使用 tiptap、slate 等编辑器库,加粗和插入链接需自行创建 strong/a 元素并操作选区。

Firefox 不支持 document.execCommand 怎么办
这个 API 在 Firefox 里早就被标记为废弃,从 2020 年起彻底禁用——不是“偶尔失效”,而是调用直接抛错:TypeError: document.execCommand is not a function。别试兼容补丁,它在 Firefox 中已无回滚路径。
替代方案只有两条路:用 contenteditable + 原生 DOM 操作,或换用成熟编辑器库(如 tiptap、slate)。如果只是简单加粗/插入链接,推荐手动操作 DOM:
- 用
document.queryCommandState('bold')替代前先检查支持性(Firefox 返回false,但不报错) - 加粗逻辑改用:
const el = window.getSelection().getRangeAt(0).commonAncestorContainer; el.parentElement?.querySelector('strong') || document.execCommand('bold')→ 改成创建<strong>包裹文本节点 - 插入链接必须自己创建
<a href="...">并替换选区内容,不能依赖execCommand('createLink', ...)
Firefox 对 CSS @supports 的解析差异
Firefox 识别 @supports 没问题,但对某些新特性支持滞后或行为不同。比如 @supports (display: grid) 在旧版 Firefox(@supports (inset: 0) 在 Firefox 115+ 才开始支持,此前直接跳过整块规则。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 查
caniuse.com确认目标属性的 Firefox 起始版本,别只看“支持”就写死@supports - 避免嵌套
@supports (display: grid) and (gap: 1rem)这类组合判断——Firefox 对复合条件解析更严格,可能因其中一项不支持而整条失效 - 用
getComputedStyle(el).display === 'grid'做运行时兜底检测,比 CSS 规则更可靠
fetch() 在 Firefox 中遇到 CORS 预检失败
Firefox 对预检请求(preflight)的触发条件更敏感:比如带 Content-Type: application/json 的 POST 请求,在 Chrome 可能直发,在 Firefox 很可能卡在 OPTIONS 阶段并静默失败,控制台只显示 NetworkError when attempting to fetch resource。
关键原因不是服务端没配 CORS,而是请求头“越界”。常见踩坑点:
-
fetch('/api', { headers: { 'X-Request-ID': 'abc' } })—— 自定义 header 会强制触发预检,Firefox 尤其严格 - 用
mode: 'no-cors'是无效解法,它会让响应变成 opaque,JS 无法读取 body - 真正解法是服务端在
Access-Control-Allow-Headers明确列出所有自定义头,且注意大小写(Firefox 区分大小写,X-Request-Id≠X-Request-ID)
Firefox 的 input[type="date"] 本地化与值格式
Firefox 渲染 <input type="date"> 时,界面语言跟随系统,但输入值永远是 YYYY-MM-DD 格式(ISO 8601),和 Chrome/Safari 一致。但容易忽略的是:用户用日历控件选中日期后,input.value 在 Firefox 中可能为空,直到焦点离开(blur)才更新。
这意味着:
- 监听
input事件不如监听change可靠,尤其在表单校验场景 - 用 JS 设置值:
el.value = '2024-05-20'是安全的;但用new Date().toISOString().split('T')[0]更稳妥,避免时区导致的日期偏移 - 不要依赖
el.valueAsNumber——Firefox 不支持该属性,会返回NaN
Firefox 的兼容性问题大多不是“不支持”,而是“支持得更保守”:API 被移除得早、预检更严、事件时机更滞后、属性暴露更少。盯住 MDN 页面右上角的 Firefox 版本支持表格,比查“是否兼容”更能避开坑。











