color-adjust: exact 必须显式写在具体元素上而非父容器，因该属性不继承；打印时 background-color 需同时满足@media print、显式声明及 color-adjust: exact 才生效，且需提醒用户手动开启打印机“背景图形”选项。
color-adjust: exact 必须写在具体元素上，不能只靠 @media print 块包裹
浏览器不会把 color-adjust: exact 当作继承属性——哪怕你给 body 加了，子元素依然按默认的 color-adjust: economy 渲染。打印引擎只检查“当前元素是否显式声明了该属性”，不查父级。
常见错误是这样写：
@media print {
body {
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
这等于没写。正确做法是定位到真正要彩色输出的元素，比如状态标签、标题、关键数据行：
-
.status-pending、.invoice-number、.highlight-row这类语义化 class 要单独加规则 - 避免用通配符
* { color-adjust: exact !important; }—— Firefox 对它支持不稳定，且会拖慢打印样式计算 - 如果用 CSS-in-JS（如 Emotion 或 styled-components），确认生成的 class 名能被
@media print规则匹配到；scoped style 或动态 hash 类名可能阻断匹配
background-color 在打印中默认被忽略，必须配合 color-adjust 才生效
background-color 是打印时最常“消失”的属性。不是你写错了，而是浏览器默认禁用它，连 !important 都压不住。
必须同时满足三个条件才能让它出现：
- 声明在
@media print块内（不能只在屏幕样式里写） - 目标元素上显式写出
background-color值（如background-color: #e74c3c;） - 同一元素上同步声明
color-adjust: exact和-webkit-print-color-adjust: exact
注意：rgba(255, 0, 0, 0.8) 的 alpha 会被直接丢弃，结果可能是黑或浅灰，改用 rgb(255, 0, 0) 或 #ff0000。
Chrome/Firefox/Safari 对 color-adjust 的支持差异与兜底策略
现代浏览器都支持 color-adjust: exact，但旧版 Chrome 和 Safari 仍依赖 -webkit-print-color-adjust: exact。Firefox 从 100+ 版本起已完全支持标准属性，但若遇到颜色仍发灰，优先检查是否漏了 WebKit 前缀。
不推荐全局强制启用，但若项目兼容性要求高，可对关键容器做最小范围覆盖：
@media print {
.print-section,
.print-card,
.print-table td,
.print-table th {
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
别用 html 或 body 作为选择器起点——它们太宽泛，且属性不继承，实际无效。
打印机驱动和系统设置会覆盖 CSS，必须提醒用户手动开启“背景图形”
即使 CSS 全部写对，HP、Canon 等企业级驱动常默认锁定“灰度模式”，Windows/macOS 的色彩管理（如 Display P3、HDR、夜览）也会让同一 #4A90E2 在屏幕和纸面看起来不同。
开发者能做的有限，但必须在交付前明确提示用户：
- Chrome 打印预览 → 右上角「更多设置」→ 勾选「背景图形」
- Firefox → 打印设置 → 「页面设置」→ 勾选「打印背景颜色和图像」
- 避免依赖低对比色（如
#eee文字配#fff背景），黑白打印下极易糊成一片
真正难控的不是 CSS 写法，而是用户打印机驱动里那个没被勾上的复选框——它比任何 !important 都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
