print-color-adjust: exact 必须写在@media print块内才生效，且目标元素需显式声明background-color，同时用户打印设置不能启用“仅打印文本”选项。
为什么 print-color-adjust: exact 单独写没用
它必须出现在 @media print 块里，否则浏览器直接忽略。写在普通样式表或 @media screen 里完全无效——不是兼容性问题，是规范强制要求的生效上下文。
常见错误现象：打印预览里背景还是白的，开发者工具里能看到样式被划掉（strikethrough），说明该规则未被 print 媒体查询识别。
-
print-color-adjust: exact只对@media print内的匹配元素起作用 - 不能靠继承：目标元素（比如
<div class="header">）必须自己声明background-color，不能只依赖父级颜色 -
background-color: transparent或rgba(0,0,0,0)算“无色”，exact不会触发渲染
三属性并写才是稳妥做法
不同浏览器认不同的前缀，光写 print-color-adjust 会漏掉 Chrome 旧版、Safari 或 Firefox 107 之前的用户。目前最全且安全的写法是：
/* 必须放在 @media print 内 */
@media print {
.report-section,
table,
.highlight-box {
background-color: #eef2ff;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
}注意：!important 不是为了“压过其他样式”，而是防止某些打印插件（如 vue-print-nb）或框架注入的 reset 样式覆盖它。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-print-color-adjust：Chrome、Edge（Chromium）、Safari 必须有 -
color-adjust：W3C 标准属性，新版 Chrome/Firefox 支持良好 -
print-color-adjust：Firefox 107+ 和部分旧版 Chrome 的 fallback
用户端设置会彻底绕过所有 CSS
如果用户在 Chrome 或 Firefox 的打印对话框中勾选了「仅打印文本」（Print text only），那么无论你写多少个 exact 都不会生效——浏览器此时根本不会解析任何背景相关样式。
这不是 bug，是主动限制：这个选项优先级高于所有 CSS，代码无法检测或干预。
- 无法用 JS 判断用户是否勾选了该选项
- 不能通过 CSS 暗示或诱导用户取消勾选
- 唯一能做的，是在打印按钮旁加一行小字提示：“请在打印设置中取消勾选「仅打印文本」”
表格和嵌套容器容易漏掉声明
很多人给 <table> 加了 background-color 和 print-color-adjust，但打印出来仍是白底，原因常出在子元素上。
例如 <tr> 或 <td> 自己设置了 background-color: white，就会盖掉 <table> 的背景；或者用了 border-collapse: collapse 后，边框颜色干扰了视觉判断。
- 建议直接给
td、th显式设background-color，别依赖继承 - 避免在
@media print中用background-image，多数浏览器仍不支持打印背景图，哪怕写了exact - 如果用 iText7 或 wkhtmltopdf 转 PDF，这些 CSS 属性依然有效，但需确认 HTML 渲染阶段已加载完整 print 样式
实际生效的关键不在“写几个属性”，而在于三个硬性条件同时满足：媒体查询正确、元素显式着色、用户设置配合。少一个，就白写。
