怎样解决CSS颜色打印后与页面显示不一致

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 写了也没用

它必须同时满足四个条件才起效：只在 @media print 块里、作用于具体着色元素（不能只写 body）、color-adjust: exact 和 -webkit-print-color-adjust: exact 成对出现、且目标元素本身有显式的 color 或 background-color 声明。

1. 常见错误：把这两行写在全局样式顶部，或只加在 body 上，子元素不会继承
2. Vue/React 中用了 scoped style 或 CSS-in-JS？确认生成的 class 名能被 @media print 规则匹配到（比如没被哈希截断）
3. DevTools 里切到打印预览模式，右键元素 → “检查”，在 Styles 面板过滤 color，看 color-adjust 是否出现在“Computed”里——没出现就说明规则压根没命中

rgba() 和 CSS 变量是隐形颜色杀手

打印机不处理 alpha 通道，rgba(0, 0, 0, 0.8) 在打印时会被降级为灰度甚至透明；CSS 变量如 color: var(--text-primary) 若未在 @media print 中静态重定义，会 fallback 到 initial（通常是黑色或透明）。

1. 所有 rgba() 必须手动替换为 rgb() 或十六进制，例如：rgba(231, 76, 60, 0.9) → #e74c3c
2. Sass/Less 中的 fade-out()、transparentize() 等函数会悄悄输出 rgba()，需在 print 媒体查询中覆盖
3. 检查变量使用点：如果 --text-primary 在 @media print 外定义，必须在 print 块内重新赋值，比如 :root { --text-primary: #000; }

靠用户勾选“背景图形”永远不可控

Chrome/Firefox 的“背景图形”开关一旦关闭，background-color 和 background-image 全部失效，!important 和 color-adjust 都救不回来。而 border 不受该开关影响，是唯一稳定方案。

1. 分割线别用 height: 1px; background: #ccc，改用 border-top: 1px solid #ccc
2. 状态标签别依赖 background-color + color: white，改用 border-left: 4px solid #6366f1; color: #1e293b
3. 表格隔行变色？用 tr:nth-child(odd) { border-bottom: 1px solid #e2e8f0; } 模拟，比 background 更可靠

Firefox 打印一片白？它要双重确认

Firefox 不像 Chrome 那样响应 color-adjust，它需要界面开关 + 底层参数双开，缺一不可。

1. 打印预览右侧面板必须勾选【打印背景颜色和图像】（若没出现，先点“页面设置”→“格式和选项”→选【原始格式】）
2. 地址栏输入 about:config，把 print.print_background 和 print.print_background_images 都设为 true
3. 顺手把 print.print_colorspace 设为 sRGB，避免色彩空间错乱

最常被忽略的是：你改完 @media print 样式后，没关掉当前打印预览窗口就直接刷新——Safari 和部分 Firefox 版本会缓存旧规则，必须完全关闭预览 tab 再按 Cmd+P 或 Ctrl+P 重新唤出，才能加载最新样式。