css打印样式失效主因是未用@media print；应将打印专用样式写入该媒体查询，禁用背景图、慎用display:none，改用break-before等分页属性，并在打印预览中真实测试。
打印时CSS样式不生效，是media类型没配对
HTML打印样式失效，90%是因为没用 @media print 或误用了 @media screen。浏览器在打印预览或调用 window.print() 时，只加载并应用 @media print 规则；其他 media 类型（比如 screen、all）里的样式可能被忽略，尤其当存在冲突规则时。
实操建议：
- 把所有专为打印设计的样式（如隐藏导航栏、调整字体大小、移除背景色）统一写进
@media print { ... }块里 - 避免依赖
all，它不保证打印时生效；print才是唯一可靠的 target - 检查是否有
!important覆盖了 print 规则——浏览器打印引擎对优先级处理比渲染引擎更严格 - Chrome DevTools 的「Rendering」面板里可勾选
Emulate CSS media: print实时调试
display: none 在打印中意外生效或失效
display: none 确实能隐藏元素，但它的行为在打印上下文里容易出错：一是它会彻底移除元素（包括其子元素和伪元素），二是某些框架（如 Bootstrap）的响应式类（如 d-none d-print-block）依赖 JS 或媒体查询顺序，若未显式声明 @media print，可能根本不触发。
实操建议：
- 不要只靠
display: none隐藏页眉页脚——改用@media print { header, footer { display: none; } } - 需要“仅打印显示”的内容，用
@media print { .print-only { display: block !important; } }，并确保对应元素默认是display: none - 慎用
visibility: hidden：它保留布局空间，打印时可能留白，且部分浏览器不完全支持
background-color 和 background-image 默认不打印
绝大多数浏览器（Chrome、Edge、Firefox）默认关闭背景图形打印，这是出于省墨和兼容性考虑，不是 bug。即使你在 @media print 里写了 background: #fff 或 background-image: url(...)，也不会出现——除非用户手动在打印设置里勾选「Background graphics」。
实操建议：
- 文字背景色尽量转为
color+border或box-shadow模拟，它们可打印 - 关键信息（如状态标签、高亮行）别依赖背景色传达语义；加文字前缀（如「[已审核]」）或图标
::before更可靠 - 如果必须用背景图，提供降级方案：用
@supports (print-color-adjust: exact)尝试启用（但支持度有限，仅 Chrome/Edge 108+） - 测试时务必打开浏览器打印预览，而不是只看页面渲染效果
分页控制（page-break）在现代浏览器里依然脆弱
page-break-before、page-break-after 已被标记为废弃，应改用 break-before、break-after、break-inside。但现实是：不同浏览器对这些属性的支持程度差异大，尤其是 break-inside: avoid 在表格或 Flex 容器内经常失效。
实操建议：
- 对关键分页点（如每个报表 section），用
@media print { .section { break-before: page; } }，比依赖容器内部逻辑更稳 - 避免在
flex或grid容器上直接设break-inside: avoid；先用display: block重置，再加断页规则 - 表格跨页时，
thead { display: table-header-group; }是必须的，否则表头不会重复出现在每页顶部 - PDF 导出需求强的场景，别硬扛纯 CSS 打印，考虑 Puppeteer 或 wkhtmltopdf 这类服务端渲染方案
打印样式不是「写完就跑」的环节，它依赖浏览器实际打印引擎的行为，而这个引擎几乎不报错、不提示、不热更新。最常被忽略的是：没在真实打印预览里验证，也没关掉「背景图形」选项去模拟用户默认环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
