怎样处理CSS打印样式在Chrome和Firefox中的差异

Firefox打印预览空白主因是默认禁用背景色与图像，须同时启用界面勾选“打印背景颜色和图像”、about:config中设print.print_background和print.print_background_images为true、并确保格式为“原始格式”，缺一不可。

Firefox打印预览一片白，不是CSS写错了

根本原因是Firefox默认禁用背景色和图片，且不响应 color-adjust: exact 单一声明。Chrome能显示背景，Firefox必须双重确认：界面开关 + 底层参数。

1. 在打印预览右侧面板勾选【打印背景颜色和图像】（若没出现，先点“页面设置”→“格式和选项”→选【原始格式】）
2. 访问 about:config，把 print.print_background 和 print.print_background_images 都设为 true
3. 顺手重置 print.print_shrink_to_fit（防自动缩放裁边），print.print_colorspace 设为 sRGB

只做其中一项，大概率还是灰底或白块——Firefox 的打印通道是“双保险”机制，缺一不可。

Chrome能分页，Firefox里内容照样被截断

根本不是 break-inside: avoid 写错了，而是 Firefox 直到 v115 才在 flex/grid 容器内正确解析它；v102 等旧版会退回到已废弃的 page-break-inside 逻辑，而后者对弹性布局基本无效。

1. 必须用 @supports 隔离：@media print { @supports (break-inside: avoid) { .item { break-inside: avoid; } } @supports not (break-inside: avoid) { .item { page-break-inside: avoid; } } }
2. @supports 必须包裹在 @media print 内部，不能反过来，否则 Safari 16.4+ 会忽略整个媒体查询
3. 如果父容器是 display: flex 或 display: grid，break-inside 失效时，给子项外层加 display: flow-root 恢复文档流上下文

表格表头在Chrome不重复，Edge/Firefox却每页都有

浏览器对 的分页处理逻辑不一致：Chrome 默认不重复表头，Edge 和 Firefox 支持但需满足两个硬条件。

1. 表格必须有明确的 结构，不能只靠 散落在 里
2. 在 @media print 中显式加这条规则：thead { display: table-header-group !important; }
3. 避免给 table 设 display: block 或 overflow: hidden，这两者会直接破坏表头分页机制

同一段 @media print 在Chrome有效，Firefox/Safari却没反应

不是加载失败，而是浏览器打印引擎根本不“认”你写的规则——@media print 块外的任何样式，哪怕加了 !important，在打印时都可能被屏幕样式覆盖；Safari 还会对 media="print" 样式缓存极深。

1. 所有打印专用样式，只出现在一个 @media print { } 块内，不混杂屏幕样式
2. 隐藏导航、广告等元素时，别只写 .nav { display: none; }，而要写 @media print { body .nav { display: none; } }，靠增加层级提权
3. Safari 改完 print.css 后，必须关闭当前打印预览窗口（不是点“取消”，是关掉整个预览 tab），再按 Cmd+P 重新唤出预览
4. 别用 @import 引入 print 规则；改用 <link rel="stylesheet" href="print.css" media="print">

真正起作用的永远是真实打印输出那一瞬的解析结果，而不是 DevTools 里的模拟预览——尤其在 Safari 和旧版 Firefox 上，这点最容易被忽略。