必须用@media print包裹隐藏规则，否则display: none会永久删除元素；常见错误包括漏写@media、被内联样式覆盖、visibility/opacity无效、表格列仍占宽、绝对定位元素藏不住、背景图未禁用等。
必须用 @media print 包裹隐藏规则，否则不是“打印时隐藏”，而是“页面上就消失”——这是绝大多数人踩坑的起点。
为什么 display: none 在 @media print 外写就失效
浏览器只在触发 window.print() 或进入打印预览时解析 @media print 块，其他时间完全忽略它。把 .no-print { display: none; } 直接写进主样式表，等于永久删掉元素。
- 常见错误现象：页面一加载导航栏就没了 → 检查是否漏了
@media print包裹 - 写了
@media print { .sidebar { display: none; } }但打印预览里还在 → 确认没被内联样式（如style="display: block"）覆盖；加!important是底线 - 用了
visibility: hidden或opacity: 0→ 这俩在打印中不阻止输出，纯属无效操作
@media print 中 display: none 不生效的真实原因
不是语法错，是渲染层或布局机制导致的“视觉残留”。比如：
- 表格列隐藏后仍占宽度：只给
<td>加display: none没用，必须先给<table>设table-layout: fixed - 绝对定位 /
transform元素藏不住：建议改用visibility: hidden; position: absolute; left: -9999px;双保险 - 背景图或渐变仍输出灰块：浏览器默认禁用背景打印，得显式写
background: none;或background-image: none;
动态控制打印隐藏（比如点击按钮后临时隐藏侧边栏）
不能靠 class 切换再调 window.print()，因为样式可能未及时生效；也不能用 setTimeout 猜时机。正确做法是插入临时 <style> 标签，并在打印后清理：
立即学习“前端免费学习笔记（深入）”；
const style = document.createElement('style');
style.textContent = '@media print { .sidebar, .toolbar { display: none !important; } }';
document.head.appendChild(style);
window.addEventListener('afterprint', () => {
document.head.removeChild(style);
}, { once: true });
注意：这个临时样式必须在 window.print() 调用前已挂载，且监听 afterprint 时加 { once: true } 防止多次触发。
移动端打印预览中 display: none 失效怎么办
Safari iOS 和 Chrome for Android 的打印预览常复用屏幕渲染逻辑，@media print 规则有时压根不注入。更稳妥的做法是结合 CSS 变量与事件钩子：
- 先定义变量：
:root { --print-mode: 0; }，再写@media print { :root { --print-mode: 1; } } - 用 JS 监听：
window.addEventListener('beforeprint', () => document.body.classList.add('print-active')) - 样式写成：
.print-active .sidebar { display: none !important; }
这种模式绕开了媒体查询解析时机问题，也兼容旧版 WebView。
真正容易被忽略的是：打印样式表必须放在屏幕样式之后，否则会被覆盖；而且所有涉及打印的类名（如 .no-print）要语义清晰、避免深层嵌套，否则在 SSR 或框架渲染下容易失效。
