@media print中display:none并非总生效，主因是选择器权重不足、visibility:hidden误用、动态内容未覆盖、框架样式干扰；需显式隐藏导航栏等非内容元素，并防布局错乱。
@media print 里 display: none 是最可靠、最直接的隐藏方式，但必须写对选择器、加对权重、避开 visibility 的陷阱。
为什么写了 display: none 却还打印出来
常见现象是导航栏、广告位、按钮在打印预览里依然可见。根本不是语法错误，而是规则没生效：
- 选择器权重不够：比如
.nav被第三方库的header .nav覆盖，得改成body .nav或.nav.print-hidden - 用了
visibility: hidden：它保留盒模型空间，打印时照样占行、撑空白页，display: none才真正移除布局影响 - JS 动态插入的内容没覆盖：比如
.modal、.toast、.loading这些类名没出现在@media print块里，就会原样输出 - 框架自带样式干扰：Bootstrap 的
.navbar默认无 print 规则，但它的屏幕样式带!important，你得用同等或更高权重覆盖
哪些元素必须显式隐藏
浏览器不会自动判断“这个该删”，所有非内容区域都得手动关掉：
-
.navbar、.sidebar、.ads、.footer-cta—— 这些在纸上毫无意义 -
.btn、.icon-print、.dropdown-toggle—— 交互控件不参与物理输出 -
.hidden-print这类自定义类要提前约定好，避免后期漏加 - 注意响应式类：比如
.d-md-none在 print 下无效，得单独加@media print { .d-md-none { display: block !important; } }
如何避免隐藏后布局错乱
隐藏只是第一步，后续布局可能因父容器塌陷、浮动残留、flex 换行异常而崩：
- 清除浮动：
float: none !important加到@media print入口处，防止.clearfix失效 - 重置 flex 容器：
display: block !important或flex-direction: column !important，避免多列在单页上挤成窄条 - 检查
overflow: hidden父级：它会截断内容导致下半页全空，print 下建议设为overflow: visible !important - 慎用通配符隐藏：
.container * { display: none; }很容易误杀正文里的img或table，优先白名单制
调试时怎么快速定位漏网之鱼
别靠猜，用可验证的视觉标记直击问题：
- 临时加 debug 规则：
@media print { * { outline: 1px solid red !important; } }，预览里红色边框包住谁，谁就是没被隐藏的活口 - Chrome 打印预览里按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win）打开命令菜单，搜 “Rendering” → 开启 “Emulate CSS media type” → 选print，看样式是否加载，但注意分页线不准 - 真机验证前务必确认 Chrome 设置里勾选了 “背景图形”，否则
background-color类规则全失效，连带影响你判断隐藏是否到位
最容易被忽略的是动态渲染区域——比如 React 组件里 useEffect 插入的 .notification，它不在初始 HTML 里，但打印快照会包含它；这类内容必须在全局 @media print 中预判并声明隐藏，不能只靠组件内联样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
