@media print中display:none失效主因是选择器权重不足、误用visibility:hidden、JS动态元素未覆盖及框架样式干扰；须显式隐藏非内容元素并重置浮动、flex等布局。
写了 @media print 却没效果，大概率不是语法错，而是规则根本没生效——浏览器照常渲染导航栏、按钮、空白页，问题出在选择器权重、隐藏方式误用或调试路径不对。
为什么 display: none 在打印预览里还显示元素
常见现象是 .navbar、.ads、.btn 依然可见。根本原因不是 CSS 写错了，而是：
-
display: none被更高权重的样式覆盖（比如第三方库的header .nav { display: flex !important; }） - 误用了
visibility: hidden：它保留盒模型空间，打印时照样占行、撑出空白页 - JS 动态插入的元素（如
.modal、.toast）没被@media print规则覆盖 - 框架自带样式干扰（如 Bootstrap 的
.navbar没定义 print 行为，但屏幕样式带!important）
哪些元素必须显式加 display: none 才安全
浏览器不会自动过滤“非内容区域”，所有和纸面无关的结构都得手动关掉：
-
.navbar、.sidebar、.ads、.footer-cta—— 这些在纸上毫无意义 -
.btn、.icon-print、.dropdown-toggle—— 交互控件不参与物理输出 -
.loading、.toast、.modal—— JS 渲染的浮层也得一并加进规则 - 响应式类如
.d-md-none在 print 下无效，得单独写：@media print { .d-md-none { display: block !important; } }
怎么避免隐藏后布局错乱或分页异常
隐藏只是第一步，父容器塌陷、flex 换行、浮动残留都会导致内容挤成窄条、截断或空白页：
立即学习“前端免费学习笔记（深入）”；
- 统一重置浮动：
@media print { * { float: none !important; } } - 强制 flex 容器退化为块级：
@media print { .container { display: block !important; } } - 检查
overflow: hidden父级：它会截断内容，print 下建议设为overflow: visible !important - 表格要小心：
<thead>必须用display: table-header-group（不能只写table-header），且<tbody>别设display: block
Chrome 打印预览里样式不生效的真正原因
不是代码问题，而是触发条件或环境没对：
- 确认你用的是原生打印（
Ctrl+P/Cmd+P），不是「另存为 PDF」插件或截图工具 - Chrome 默认关闭「背景图形」，
background-color和background-image全部失效，必须手动勾选 - DevTools 的「Emulate CSS media type → print」仅模拟样式加载，不模拟分页逻辑，分页线不准
- 用
window.matchMedia('print').matches在控制台直接验证是否进入打印模式，比猜靠谱
真正难的不是写几行 @media print，而是把动态插入的类、框架的隐式样式、浏览器对 @page 的覆盖逻辑全兜住——漏一个，就可能多出半页空白或标题被截断。
