color-adjust: exact 必须置于 @media print 内，因打印引擎仅识别该媒体查询；需与 -webkit-print-color-adjust: exact 成对使用，并作用于具体着色元素，而非仅 body 或全局样式。
color-adjust: exact 为什么必须加在 @media print 里
浏览器打印引擎完全独立于屏幕渲染，@media print 是唯一被识别的打印样式入口。哪怕你在全局 CSS 里写了 color-adjust: exact，只要没包在 @media print 块内，它就对打印无效。
常见错误是把这条声明写在普通样式表顶部，或者只加在 body 上，结果打印时颜色照旧消失。
-
color-adjust: exact和-webkit-print-color-adjust: exact必须成对出现在@media print内部 - 作用目标要具体：不能只写
body { ... }，得覆盖到实际用色的元素，比如p, h1, .invoice-item, .status-badge - Firefox 支持
color-adjust，但 Safari/Chrome 仍依赖-webkit-print-color-adjust，缺一不可
为什么加了 !important 还没用
不是优先级不够，而是规则根本没命中——打印时浏览器会忽略所有未显式声明在 @media print 中的 color 值，哪怕它带 !important。
更隐蔽的问题是：某些组件库（如 Tailwind）默认不生成 print: 变体，print:text-red-600 类即使写了也不会输出对应 CSS，除非你在 tailwind.config.js 中显式启用 print 变体。
- 检查 DevTools 的 “Styles” 面板，在打印预览模式下过滤
color，确认该属性是否真的出现在计算样式中 - 避免用
rgba()：打印机不处理 alpha 通道，rgba(0,0,0,0.9)会被降级为灰度甚至透明，一律改用#000或rgb(0,0,0) - 如果用了 CSS 变量（如
color: var(--text-primary)），确保变量在@media print中已静态解析，否则可能 fallback 到初始值
border 替代 background-color 才是真正可靠的方案
靠用户勾选“打印背景图形”永远不可控。哪怕你加了 color-adjust: exact，只要用户在 Chrome 打印设置里关掉“背景图形”，所有 background-color 和 background-image 都会失效——这无法用 CSS 绕过。
而 border 属性不受该开关影响，浏览器强制打印边框，稳定性远高于背景色。
- 把
.divider { height: 1px; background: #ccc; }改成.divider { border-top: 1px solid #ccc; } - 状态标签（如
.status.draft）别用background-color+ 白字，改用border-left: 4px solid #6366f1;+ 黑字 - 表格隔行变色？用
tr:nth-child(odd) { border-bottom: 1px solid #eee; }模拟，比background更稳
测试时最容易漏掉的三个点
打印预览看着正常 ≠ 实际 PDF 或纸张输出正常。很多问题只在导出 PDF 或真机打印时暴露。
- 不要只看 Chrome 打印预览，切到 “另存为 PDF” 后再打开 PDF 查看——有些渲染差异预览里不显示
- 禁用广告拦截插件（如 uBlock Origin），它们常注入
@media print { * { background: transparent !important; } }这类全局重置 - 用
@media print { .debug-test { border: 2px dashed red !important; } }临时加个可见标记，确认你的@media print规则是否被加载和执行
真正难的不是写对那几行 CSS，而是意识到：浏览器打印设置、插件干扰、CSS 变量未展开、RGBA 透明度、组件库变体缺失……这些因素叠加起来，会让一个看似简单的 color 属性变得极难稳定输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
