火狐中@media print不生效，主因是CSS解析中断或底层打印开关未开启。需检查CSS语法错误、文件加载状态、UTF-8 BOM、括号配对，并通过Ctrl+P真实预览验证；同时在about:config中启用print.print_background等参数。
@media print 在火狐里不生效，大概率不是你写错了，而是它根本没被解析到——CSS 文件中途崩了，或者被浏览器主动跳过了。
为什么火狐会完全忽略你的 @media print 块
火狐的 CSS 解析器对语法错误极其敏感：只要前面有一条规则漏了 }、;，或 @import 没放在最开头，它就会静默丢弃该错误点之后所有样式，包括整个 @media print 块。这不是优先级问题，是解析直接中断。
- 用开发者工具 Network 面板检查所有
.css请求状态码，非200的（比如404或返回 HTML 登录页）会导致后续全部失效 - 本地 CSS 文件若含 UTF-8 BOM 头，火狐会在
@media前插入不可见字符，整块被当垃圾跳过 -
@keyframes、@font-face或 grid-template-areas 中任意一处括号/引号不配对，都会让解析器“迷路”
验证是否真被解析：别信 DevTools 模拟
Chrome/Firefox 的「Emulate CSS media type → print」只改渲染 viewport，不触发真实分页引擎，@page、page-break-inside、跨页表头等全不工作。必须用真实流程验证：
- 按
Ctrl+P进火狐打印预览（不是右键→打印） - 在预览界面右上角点「更多设置」→ 确保勾选「打印背景颜色和图像」
- 若此时仍无效果，说明样式压根没进打印上下文——不是覆盖问题，是加载或解析失败
绕过解析失败的临时注入法
当无法立刻修改源 CSS 时，可在控制台强制注入干净的打印规则（注意：仅限调试，不能替代修复）：
const s = document.createElement('style');
s.textContent = `
@media print {
* { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
body * { visibility: hidden; }
.print-area, .print-area * { visibility: visible; }
.print-area { position: absolute; top: 0; left: 0; width: 100%; }
}`;
document.head.appendChild(s);
- 该方式绕过外部文件加载路径与编码问题，直接注入 DOM
-
.print-area需提前在 HTML 中加好 class，否则什么也打不出来 - 注入后必须刷新页面再进
Ctrl+P，否则火狐不会重新抓取该 style 节点
真正容易被忽略的底层开关
即使 @media print 成功解析，火狐默认仍禁用部分输出通道。必须手动开启底层参数：
- 地址栏输入
about:config→ 搜索print.print_background→ 设为true - 同理设
print.print_background_images为true - 搜索
print.print_shrink_to_fit→ 右键「重置」，否则火狐会强行压缩内容破坏布局 - 最后确认
toolkit.legacyUserProfileCustomizations.stylesheets是true，否则userContent.css不生效
这些参数不依赖 CSS 文件，也不受媒体查询影响——它们是火狐打印引擎的物理开关，关着就等于没通电。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
