必须使用@media print { .no-print { display: none !important; } }，因浏览器仅在打印时解析该规则；其他隐藏方式如visibility:hidden或opacity:0无效，因其不切断渲染树；动态控制需插入临时style标签并监听afterprint清理。
@media print { .no-print { display: none !important; } } 是唯一可靠写法
不是“可以试试”，而是必须这么写。浏览器只在触发 window.print() 或进入打印预览时解析 @media print 块，其他时候完全忽略它。把 .no-print { display: none; } 直接塞进全局 CSS，等于一加载页面按钮就消失——这不是打印隐藏，是永久删除。
常见错误现象：
- 按钮在页面上正常，但打印预览里还在 → 检查是否漏了
@media print包裹 - 按钮一打开页面就没了 → 确认没写在主样式表里，也没被
media="screen"的<link>排除 - 加了
!important还不生效 → 很可能是内联样式（如style="display: block"）覆盖了，得用更狠的：display: none !important; all: unset !important;
为什么不能用 visibility: hidden 或 opacity: 0
这两个属性在打印中纯属无效操作。它们不影响布局、不阻止内容输出，浏览器照常把元素框和文字渲染进 PDF 或纸张。你看到按钮“变透明”或“看不见”，只是屏幕渲染效果，打印引擎根本不买账。
正确做法只有一条：用 display: none 切断渲染树。其他所有视觉隐藏手段，在打印上下文里都等同于没写。
立即学习“前端免费学习笔记（深入）”；
注意：position: absolute; left: -9999px 也不是万能解——某些脱离文档流的按钮（比如固定定位的悬浮打印按钮），仍可能留下空白占位或意外渲染。真遇到这种问题，得搭配 visibility: hidden; pointer-events: none; 双保险，但优先级仍是 display: none。
动态控制按钮隐藏（比如点击后临时隐藏再打印）
不能靠 JS 切换 class 再调 window.print()，因为样式变更可能未完成渲染就进入打印流程；也不能用 setTimeout 猜时机——不同设备、不同浏览器的渲染延迟不可控。
正确做法是插入临时 <style> 标签，并监听 afterprint 清理：
const style = document.createElement('style');
style.textContent = '@media print { #print-btn, .no-print { display: none !important; } }';
document.head.appendChild(style);
window.addEventListener('afterprint', () => {
document.head.removeChild(style);
}, { once: true });
window.print();
关键点：
- 这个
<style>必须在window.print()调用前已挂载到<head> -
{ once: true }防止多次触发导致报错（比如用户连点两次打印） - 不要用
document.getElementById('print-btn').style.display = 'none'——这是内联样式，@media print无法覆盖它
表格、固定定位、背景图这些特殊场景怎么处理
按钮本身是普通块级元素时，@media print { .no-print { display: none !important; } } 就够用了。但如果你的按钮嵌在复杂结构里，容易踩坑：
- 按钮放在
<table>里？先给<table>加table-layout: fixed，否则只对<td>设display: none仍会占列宽 - 按钮是
position: fixed（比如右下角悬浮按钮）？部分浏览器仍会输出其占位，建议改用visibility: hidden; position: absolute; left: -9999px; - 按钮带背景图或渐变？浏览器默认禁用背景打印，但会把
background-color: rgba()强制转为不透明实色，得显式写background: none !important;
真正麻烦的从来不是按钮本身，而是它所处的上下文。别只盯着 class 名，得看它父容器的布局模式、定位方式、是否含背景或边框——这些才是打印时藏不住的根源。
