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 声明。
- 常见错误：把这两行写在全局样式顶部，或只加在
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) 在打印时会被降级为灰度甚至透明；CSS 变量如 color: var(--text-primary) 若未在 @media print 中静态重定义，会 fallback 到 initial（通常是黑色或透明）。
- 所有
rgba()必须手动替换为rgb()或十六进制，例如：rgba(231, 76, 60, 0.9)→#e74c3c - Sass/Less 中的
fade-out()、transparentize()等函数会悄悄输出rgba()，需在 print 媒体查询中覆盖 - 检查变量使用点：如果
--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 那样响应 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 重新唤出，才能加载最新样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
