firefox打印预览空白主因是默认禁用背景色与图像，须同时启用界面勾选“打印背景颜色和图像”、about:config中设print.print_background和print.print_background_images为true、并确保格式为“原始格式”，缺一不可。
Firefox打印预览一片白，不是CSS写错了
根本原因是Firefox默认禁用背景色和图片，且不响应 color-adjust: exact 单一声明。Chrome能显示背景，Firefox必须双重确认：界面开关 + 底层参数。
- 在打印预览右侧面板勾选【打印背景颜色和图像】（若没出现，先点“页面设置”→“格式和选项”→选【原始格式】）
- 访问
about:config，把print.print_background和print.print_background_images都设为true - 顺手重置
print.print_shrink_to_fit（防自动缩放裁边），print.print_colorspace设为sRGB
只做其中一项，大概率还是灰底或白块——Firefox 的打印通道是“双保险”机制，缺一不可。
Chrome能分页，Firefox里内容照样被截断
根本不是 break-inside: avoid 写错了，而是 Firefox 直到 v115 才在 flex/grid 容器内正确解析它；v102 等旧版会退回到已废弃的 page-break-inside 逻辑，而后者对弹性布局基本无效。
- 必须用
@supports隔离：@media print { @supports (break-inside: avoid) { .item { break-inside: avoid; } } @supports not (break-inside: avoid) { .item { page-break-inside: avoid; } } } -
@supports必须包裹在@media print内部，不能反过来，否则 Safari 16.4+ 会忽略整个媒体查询 - 如果父容器是
display: flex或display: grid，break-inside失效时，给子项外层加display: flow-root恢复文档流上下文
表格表头在Chrome不重复，Edge/Firefox却每页都有
浏览器对 <thead> 的分页处理逻辑不一致：Chrome 默认不重复表头，Edge 和 Firefox 支持但需满足两个硬条件。
<ul><li>表格必须有明确的 <code><thead><tr><th></th></tr></thead> 结构，不能只靠 <th> 散落在 <code><tr> 里
<li>在 <code>@media print 中显式加这条规则：thead { display: table-header-group !important; }
table 设 display: block 或 overflow: hidden，这两者会直接破坏表头分页机制同一段 @media print 在Chrome有效，Firefox/Safari却没反应
不是加载失败，而是浏览器打印引擎根本不“认”你写的规则——@media print 块外的任何样式，哪怕加了 !important，在打印时都可能被屏幕样式覆盖；Safari 还会对 media="print" 样式缓存极深。
- 所有打印专用样式，只出现在一个
@media print { }块内，不混杂屏幕样式 - 隐藏导航、广告等元素时，别只写
.nav { display: none; }，而要写@media print { body .nav { display: none; } }，靠增加层级提权 - Safari 改完
print.css后，必须关闭当前打印预览窗口（不是点“取消”，是关掉整个预览 tab），再按Cmd+P重新唤出预览 - 别用
@import引入 print 规则；改用<link rel="stylesheet" href="print.css" media="print">
真正起作用的永远是真实打印输出那一瞬的解析结果，而不是 DevTools 里的模拟预览——尤其在 Safari 和旧版 Firefox 上，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
