打印按钮在预览中仍显示是因为未用@media print隔离样式；应默认隐藏、仅在@media print中用display: none和!important显式激活，避免visibility:hidden占位，并处理fixed定位及ios safari兼容问题。
打印按钮为什么在预览里还显示？
因为没用 @media print 隔离样式。浏览器只在触发 window.print() 或进入打印预览时才解析 @media print 规则，其他时候完全忽略它。把 .print-only { display: none; } 直接写进主样式表，结果页面一加载就看不见了——这不是“打印时显示”，是“永远不显示”。
@media print 里怎么让按钮只出现？
两种写法都行，但推荐反向控制：默认隐藏，仅在打印上下文显式激活。
-
.print-only { display: none; }放全局样式（非@media块内） @media print { .print-only { display: inline-block !important; } }
必须加 !important，否则可能被组件库或内联样式覆盖；inline-block 比 block 更安全，避免意外换行或宽度撑满。
为什么用 visibility: hidden 不行？
它仍占布局空间，打印分页会把空白高度算进去，可能导致多出一页、内容错位，甚至第一页只有一行字加大片留白。
-
display: none是唯一能真正“移除参与排版”的方式 - 不要混用
visibility和display控制同一元素——打印引擎对两者的处理逻辑不同，容易冲突 - 如果按钮本身是
position: fixed，还得额外在@media print里加position: static !important;，否则它可能悬浮在每一页顶部
移动端 Safari 打印时按钮不出现怎么办？
它不支持 window.print()，也不会触发 @media print 样式生效。这时候靠 CSS 已经没用，得降级。
- 检测
matchMedia('print').matches是否为false，再结合navigator.userAgent判断是否为 iOS Safari - 降级方案：生成 PDF 链接，或用 canvas 截图 + 下载
- 别试图用 JS 动态插入按钮再调
window.print()——插入时机不可控，样式往往来不及应用
真正麻烦的不是写法，而是「打印样式只在打印那一刻才起效」这个事实。很多人调试时反复刷新页面看效果，其实该打开打印预览（Ctrl+P / Cmd+P）才能验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
