color-adjust: exact 要想在打印场景中真正生效，必须同时满足四个关键条件：只能写在 @media print 中、必须直接作用于具体着色元素、要与 -webkit-print-color-adjust: exact 配合使用、并且目标元素本身要显式声明 color 或 background-color；另外，rgba() 建议统一替换为 rgb() 或十六进制颜色值，CSS 变量需要在 @media print 里重新定义，而在打印颜色控制上，border 通常比 background 更稳定可靠。
打印后颜色与网页页面显示不一致，很多时候并不是“打印颜色不准确”，而是浏览器根本没有把你设置的颜色正确传递给打印机——常见原因通常集中在这三类：color-adjust: exact 没有生效、rgba() 颜色值在打印时被忽略，或者用户关闭了“背景图形”选项，这三种情况基本占到了 90% 的问题来源。
为什么 color-adjust: exact 明明写了却不生效
如果想让这个属性在 CSS 打印样式中真正起作用，以下四个条件缺一不可：第一，必须放在 @media print 打印媒体查询内；第二，必须直接应用到具体需要着色的元素上，不能只是泛泛地写在 body 上；第三，color-adjust: exact 与 -webkit-print-color-adjust: exact 这两个声明要同时存在；第四，目标元素本身还必须明确设置 color 或 background-color，否则浏览器仍可能忽略打印颜色。
- 常见错误：把这两条规则写在全局样式顶部，或者仅仅加在
body上，导致子元素无法正确继承打印颜色设置 - 如果在 Vue、React 中使用了 scoped style 或 CSS-in-JS，要检查生成后的 class 名是否仍能被
@media print命中，例如是否被哈希处理后无法匹配 - 可以在 DevTools 中切换到打印预览模式，右键目标元素 → “检查”，然后在 Styles 面板中筛选
color，确认color-adjust是否出现在“Computed”里；如果没有出现，就说明这条打印样式根本没有命中
rgba() 和 CSS 变量为什么容易导致打印颜色异常
打印机本身并不会真正处理 alpha 透明通道，因此像 rgba(0, 0, 0, 0.8) 这样的颜色，进入打印流程后通常会被转换成灰度色，严重时甚至会接近透明；而像 color: var(--text-primary) 这样的 CSS 变量，如果没有在 @media print 中提前进行静态重定义，打印时就可能回退到 initial，常见表现要么变成黑色，要么直接显示异常甚至接近透明。
- 所有
rgba()最好手动替换为rgb()或十六进制颜色值，例如：rgba(231, 76, 60, 0.9)→#e74c3c - Sass/Less 里的
fade-out()、transparentize()等函数，往往会在编译后悄悄输出rgba()，因此需要在 print 媒体查询里单独覆盖 - 重点检查 CSS 变量的使用位置：如果
--text-primary是在@media print外定义的，就必须在 print 规则中重新赋值，例如:root { --text-primary: #000; }
依赖用户勾选“背景图形”为什么不可靠
在 Chrome 和 Firefox 中，一旦用户关闭“背景图形”选项，所有 background-color 和 background-image 都会直接失效，哪怕你加了 !important 或使用了 color-adjust 也无法挽回。因此，从打印兼容性和稳定性角度来看，border 才是更稳妥、可控的方案。
- 分割线不要再使用
height: 1px; background: #ccc，更推荐改成border-top: 1px solid #ccc - 状态标签不要只依赖
background-color + color: white，可以改用border-left: 4px solid #6366f1; color: #1e293b来实现更稳定的打印效果 - 如果需要表格隔行区分，不要依赖背景色，可使用
tr:nth-child(odd) { border-bottom: 1px solid #e2e8f0; }进行模拟，这种方式比 background 更适合打印场景
Firefox 打印出来一片空白？它需要双重确认
Firefox 对打印颜色的处理方式和 Chrome 不同，它并不会像 Chrome 那样直接响应 color-adjust，通常需要“界面开关 + 底层参数”同时开启，少一个都可能导致打印背景颜色或图像失效。
- 在打印预览右侧面板中，必须勾选【打印背景颜色和图像】；如果没有看到这个选项，可以先点击“页面设置”→“格式和选项”→选择【原始格式】
- 在地址栏输入
about:config，将print.print_background和print.print_background_images两项都设置为true - 同时建议把
print.print_colorspace设置为sRGB，以减少色彩空间不一致导致的打印偏色问题
还有一个最容易被忽视的细节是：当你修改完 @media print 样式后，如果没有先关闭当前打印预览窗口，而是直接刷新页面，Safari 和部分 Firefox 版本很可能继续缓存旧的打印规则。正确做法是先彻底关闭打印预览 tab，再重新按 Cmd+P 或 Ctrl+P 打开打印窗口，这样浏览器才会重新加载最新的打印样式。
