Chrome打印正常而Firefox一片白，是因为Firefox默认禁用背景色和图片，需同时开启打印预览中的【打印背景颜色和图像】选项及about:config中print.print_background与print.print_background_images两项设为true。
为什么 Chrome 打印预览看起来正常，Firefox 却一片白？
根本不是 CSS 写错了，而是 Firefox 默认禁用背景色和图片，且不响应 @media print 中的常规覆盖声明。Chrome 会尊重 color-adjust: exact，Firefox 则需要双重确认：既要界面开关打开，也要底层参数强制启用。
必须同时做两件事：
- 在打印预览右侧面板中，勾选【打印背景颜色和图像】（若没出现，先点“页面设置”→“格式和选项”→选【原始格式】）
- 访问
about:config，把print.print_background和print.print_background_images都设为true - 顺手把
print.print_shrink_to_fit重置（防自动缩放裁边），print.print_colorspace设为sRGB
只做其中一项，大概率还是灰底或白块——Firefox 的打印通道是“双保险”机制，缺一不可。
为什么 Safari 打印预览总不更新我改的 print.css？
Safari 对 media="print" 样式缓存极深，哪怕你刷新页面、清空缓存，它仍可能沿用旧规则。这不是 bug，是它的渲染预览层不触发 CSS 重解析。
立即学习“前端免费学习笔记（深入）”；
唯一可靠验证方式：
- 改完
print.css后，**必须关闭当前打印预览窗口**（不是点“取消”，是关掉整个预览 tab） - 再按
Cmd+P重新唤出预览——Safari 只在这时重新加载并解析media="print"资源 - 如果用了
@import在主 CSS 里引入 print 规则，Safari 很可能直接忽略；改用<link rel="stylesheet" href="print.css" media="print">
别信 DevTools 里的“Emulate CSS media type”，它不走 Safari 真实分页引擎，纯属摆设。
为什么表格在 Chrome 打印时表头不重复，Edge 却每页都有？
浏览器对 <thead> 的分页处理逻辑不一致：Chrome 默认不重复表头，Edge 和 Firefox 支持但需满足两个硬条件。
要让表头跨页稳定显示，得同时满足：
- 表格必须有明确的
<thead><tr><th>...</th></tr></thead>结构，不能只靠<th>散落在<tr>里 - 在
@media print中显式加这条规则：thead { display: table-header-group !important; } - 避免给
table设display: block或overflow: hidden，这两者会直接破坏表头分页机制
就算 DOM 结构正确，漏掉 display: table-header-group，Chrome 依然不会重复表头——这是它打印引擎的默认行为，不是 bug。
为什么加了 color-adjust: exact 还是打印成黑白？
三个属性缺一不可，且必须作用于所有目标元素，不能只写在 body 上。
常见错误写法：@media print { body { color-adjust: exact; } } ——这只会让 body 自己的颜色生效，子元素继承不到。
正确写法（必须）：
@media print {
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
}另外注意：某些框架（如 React + Styled Components）默认不注入 @media print 规则到全局样式表，Shadow DOM 内部的元素更会被完全隔离——这种情况下，color-adjust 再全也没用，得改用全局 CSS 注入或显式透传样式。
