根本原因是选择器权重不足、误用visibility:hidden、JS动态元素未覆盖及框架样式干扰；须显式隐藏非内容元素并重置浮动、flex等布局。
为什么写了 display: none 还在打印里显示元素
不是语法错，是规则根本没生效。浏览器照常渲染导航栏、按钮、空白页，问题出在选择器权重、隐藏方式误用或调试路径不对。
-
.navbar被第三方库的header .navbar覆盖，得写成body .navbar或加!important - 误用
visibility: hidden：它保留盒模型空间，打印时照样占行、撑出空白页 - JS 动态插入的
.modal、.toast、.loading没被@media print规则覆盖 - Bootstrap 等框架的屏幕样式带
!important，你得用同等或更高权重覆盖
哪些选择器必须显式声明才能安全隐藏
浏览器不会自动过滤“非内容区域”，所有和纸面无关的结构都得手动关掉，且必须用足够具体的选择器。
-
.navbar、.sidebar、.ads、.footer-cta—— 这些在纸上毫无意义 -
.btn、.icon-print、.dropdown-toggle—— 交互控件不参与物理输出 -
.d-md-none这类响应式类在@media print下无效，得单独写：@media print { .d-md-none { display: block !important; } } - 慎用通配符：
.container * { display: none; }容易误杀正文里的<img>或<table>
@media print 里选择器权重怎么才算够
根本原因是浏览器默认的 @media print 优先级不比屏幕样式高，哪怕写在 CSS 文件末尾，只要选择器权重相同，屏幕样式仍会生效。
- 把
.header改成@media print { body .header }，靠增加层级提权 - 避免滥用
!important—— 它在打印时可能被忽略，或导致后续调试混乱 - 外部样式表更可靠：
<link rel="stylesheet" media="print" href="print.css">，比内联@media print更早加载、更稳 - 别把
@media print塞进多个<link>或分散在 JS 注入的样式里，它必须作用于最终参与渲染的文档流
调试时怎么快速定位漏网之鱼
别靠猜，用可验证的视觉标记直击问题。开发者工具的模拟模式只改渲染，不触发真实分页逻辑。
立即学习“前端免费学习笔记（深入）”；
- 临时加 debug 规则：
@media print { * { outline: 1px solid red !important; } }，预览里红色边框包住谁，谁就是没被隐藏的活口 - Chrome 打印预览里按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win），搜 “Rendering” → 开启 “Emulate CSS media type” → 选print，看样式是否加载，但注意分页线不准 - 真验证法：按
Ctrl+P/Cmd+P进入真实打印预览 → 关掉「页眉页脚」→ 开启「背景图形」→ 拉动缩放看分页是否合理
最耗时间的往往不是写样式，而是反复打印试错——不同浏览器对 page-break 的实现差异、打印机驱动对 CSS 的兼容程度、甚至纸张尺寸设置错误，都会让预览和实打效果差一截。
