print.css 失效主因是 media 属性写错，必须严格为 media="print"；打印时颜色背景默认被禁用，需加 print-color-adjust: exact；表格需重置布局避免截断；scoped 样式在打印中易失效，应抽离至全局 @media print 块。
media="print" 属性写错是最常见原因
print.css 文件没生效，90% 是因为 link 标签的 media 值不对。不是 media="screen"，也不是 media="all" 或 media="screen, print"，更不能拼成 media="prnt"。必须严格写成：media="print"，大小写敏感。
错误示例：<link rel="stylesheet" href="print.css" media="screen"> —— 这会让浏览器完全忽略该文件在打印时的作用。
正确写法只有一种：<link rel="stylesheet" href="print.css" media="print">
注意：@import 在普通 CSS 里导入 print 规则，Chrome 和 Safari 的打印上下文不保证支持，别用。
立即学习“前端免费学习笔记（深入）”；
@media print 里颜色和背景默认被禁用
你写了 color: #007bff 和 background-color: #f0f0f0，但打印预览里还是黑字白底——这不是你的样式没加载，是浏览器主动屏蔽了。
必须在 @media print 块内显式覆盖这个限制：
- 对需要彩色输出的元素（比如标题、状态标签），单独加
-webkit-print-color-adjust: exact和print-color-adjust: exact - 如果想全局启用，可写：
@media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }，但要注意性能开销 - 仅靠
!important不行，不配color-adjust系列声明，颜色照样被砍 - 提醒用户：Chrome 打印预览右下角「更多设置」里要手动勾选「背景图形」
表格/容器类元素在打印时容易截断或错位
A4 纸宽度约 794px（210mm），而屏幕表格常设为 100% 宽 + 横向滚动，直接打印必然被裁掉右侧内容。
关键动作不是调缩放，而是重置布局逻辑：
- 取消
overflow: hidden或overflow-x: auto，它们在打印中会破坏流式渲染 - 把
table-layout: fixed改成table-layout: auto，让表格按内容自动撑开列宽 - 给
body或打印根容器设width: 210mm，并移除所有max-width干扰 - 避免 Flex 布局：Win7 打印机驱动或旧版 Edge 对
display: flex支持极差，建议在@media print中降级为display: block+float或inline-block
Vue/React 项目中 scoped 样式在打印时失效
像 <style scoped></style> 这类带属性选择器（如 [data-v-abc123]）的样式，在打印插件（如 vue-print-nb 或 print-js）克隆 DOM 到新 iframe 时，data-v-* 属性大概率丢失，导致规则不匹配。
解决思路不是强行保留作用域，而是绕过它：
- 把关键打印样式（字体、边距、显隐控制）抽到全局
@media print块里，不依赖组件 scope - 用类名做开关，比如统一加
class="print-show"，再写@media print .print-show { display: table-row; } - 避免在
@media print中写过于嵌套的选择器（如.container .list li a），层级越深，复制后越容易断裂 - 测试时用
border: 1px solid red临时加在目标元素上，确认规则是否真被应用
真正麻烦的从来不是写多少样式，而是浏览器打印上下文根本不执行 JS、不继承 scoped 属性、也不等你动态渲染完——它只认静态 HTML + 显式声明的 @media print 规则。
