link标签必须写media="print"，浏览器才在打印时加载该样式表；漏写、写错或写成media="screen"/"all"均失效；正确写法唯一：。
link标签必须写media="print"
浏览器只在打印预览或实际打印时加载并应用 media="print" 的样式表。漏写、写错或写成 media="screen"、media="all"，都会导致样式不生效——它要么被当普通 CSS 加载（干扰页面渲染），要么根本不会进入打印上下文。
正确写法只有一种：<link rel="stylesheet" href="print.css" media="print">
-
media="screen,print"会让浏览器在屏幕渲染时也加载该文件，可能意外覆盖正常样式 -
media="print"大小写敏感，prnt或Print都无效 - 不要用
@import在主 CSS 里导入 print 样式，Chrome/Safari 打印时可能完全忽略
print.css 里要显式覆盖浏览器默认限制
你写了 color: #007bff 或 background: #f0f0f0，打印预览里还是黑字白底——这不是 bug，是浏览器默认禁用颜色和背景以节省墨水。
必须加这三行声明，缺一不可：
@media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
-
color-adjust是标准属性，Firefox/Edge 支持较好 -
-webkit-print-color-adjust是 Chrome/Safari 必需的旧前缀 - 没加
!important容易被用户浏览器的“仅文本打印”选项降级覆盖
display: none 在打印中容易引发分页错乱
用 nav, .sidebar { display: none; } 隐藏导航栏，结果页脚跑到了第一页顶部、内容被截断——因为 display: none 彻底移除盒模型，后续元素上移，而打印分页器对剩余空间的计算就失准了。
- 优先隐藏非内容区域（如广告、按钮），但避免对布局关键节点（如页脚容器）直接
display: none - 如果必须隐藏某块区域又担心分页偏移，改用
visibility: hidden+height: 0; overflow: hidden;占位 - 表格内慎用
display: none，某些浏览器打印引擎会直接跳过整张表
DevTools 模拟打印 ≠ 真实打印效果
Chrome/Firefox 的 DevTools 里勾选 “Emulate CSS media: print”，只是强制启用 @media print 规则，并不触发真实分页引擎。你看到的布局没问题，但 Ctrl+P 打印 PDF 时可能内容被硬截断、页边距错位。
- Firefox 的打印预览最接近真实输出，建议作为主要验证环境
- Chrome 可能错误合并页边距，导致内容整体右偏或下移
- Safari 有时缓存旧 print 规则，打印预览窗口里按 Cmd+R 强制刷新才生效
- 检查 Elements 面板里
<link href="print.css" media="print">是否还存在，某些 SSR 框架（如 Next.js）会在服务端剥离它
真正让 print.css 生效的，不是写完代码就完事，而是每次改完都得真点一次 Ctrl+P —— 浏览器的打印上下文，从来就不认“模拟”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
