在 Safari 中，@media print 看起来“不生效”，问题通常并不在 CSS 语法，而在于打印样式所处的上下文没有被正确声明。排查这类 Safari 打印样式问题时，首先要确保 link 或 style 的 media="print" 属性已明确写出，同时尽量避免懒加载影响打印样式注入；选择器权重也应适当提高，必要时可直接配合 !important；背景图不建议继续依赖，改用 border 或 SVG 往往更稳定；此外，放在 @media print 中使用的 CSS 变量也需要重新定义。最后还有一点非常关键：务必通过 Cmd+P 打开的原生打印预览进行验证，否则很容易误判 Safari 打印问题是否真的已经解决。
为什么 Safari 里 @media print 规则根本没有被触发
并不是 Safari 不支持 @media print，而是浏览器没有真正进入打印样式解析流程——常见原因在于 标签或 ，否则 Safari 并不保证一定会执行这些打印规则
@import 引入打印样式，那么它必须放在 CSS 文件最顶部（位于 @charset 之后、所有规则之前），若写进 @media print { } 内部，Safari 通常会直接忽略写了 @media print 还是没效果：Safari 的选择器权重陷阱
Safari 的打印引擎在处理选择器特异性（specificity）时，往往比 Chrome 更严格。尤其当页面同时使用 Bootstrap、Tailwind 或自定义 reset.css 时，屏幕样式非常容易覆盖掉你的 print 规则，这也是“Safari 打印 CSS 不生效”的高频原因之一。
- 不要只写
.header { display: none; }—— 框架中很可能已经存在header.na vbar.na vbar-light { display: flex !important; }，此时你的打印规则会被直接压制 - 必须主动提升选择器权重，例如使用
body .header、div#app .header，或者直接加上!important（虽然不算最佳实践，但在 Safari print 场景下经常是唯一可靠的方法） - 尽量避免使用通配符：
* { display: none; }在 Safari 打印模式中可能被部分忽略，甚至触发渲染异常，建议逐个指定需要隐藏或显示的关键元素 - 可在 DevTools → Elements → 选中目标元素 → Styles 面板中检查最终生效的
display值，确认它是否确实来自@media print，而不是仍被屏幕样式覆盖
真机测试失败：Safari 打印预览并不等于真实输出
DevTools 中的 Emulate CSS media type → print 只是在渲染层模拟打印媒体，并不会真正启动 Safari 的分页与打印引擎。很多与 Safari 打印样式、分页和字体相关的问题，只有在 Cmd+P 打开的原生打印预览里才会暴露出来。
- 必须手动打开原生打印预览（不是截图，也不是依赖“另存为 PDF”类插件），这样才能看到
@page、分页、字体缩放等真实打印行为 - 在 iOS Safari 上，
@page规则几乎都会被静默忽略，例如@page { margin: 1cm; }，因此只能依赖基础打印属性兜底：font-size: 12pt、color: #000、line-height: 1.4 - 移动端 Safari 默认关闭“打印背景图形”，所以
background-color和background-image通常都不会显示，而且无法通过 CSS 强行开启，只能改用border或内联svg来替代 - 建议在
@media print body中启用-webkit-text-size-adjust: 100%，否则 Safari 可能根据视口宽度自动放大字体，导致 A4 页面布局瞬间被撑乱
CSS 变量在 Safari print 中“卡住不变”的真正原因
var(--primary-color) 打印出来仍然是蓝色？这通常不是变量语法失效，而是 Safari 在解析打印样式时只读取了一次初始值。如果没有在 @media print 代码块中重新赋值，它就会一直沿用旧值。
- 必须在
@media print内显式重定义，例如：:root { --primary-color: #000; }，而不能只写html { --primary-color: #000; }（html不能替代根变量定义） - 凡是被
var()引用、并且会影响打印展示的变量，都应该在@media print中重新赋值——哪怕只漏掉一个变量，也可能导致整块打印布局错乱 - Chrome 打印预览有时会缓存旧的变量值，修改后必须彻底关闭再重新打开打印窗口，否则即使 DevTools 中查看，依然可能看到旧的计算结果
- 不要依赖 JS 动态执行
document.documentElement.style.setProperty()来修改变量——Safari 的打印上下文通常不会执行这类脚本，因此变量不会按预期更新
真正困难的地方，从来不是写出 @media print 规则本身，而是确认 Safari 在你点击 Cmd+P 的那一刻，是否真的把这些打印样式纳入了解析流程。它不会报错，也不会警告，只会静悄悄地忽略——因此每次修改完成后，都应坚持真机测试 + 原生打印预览双重验证，才能准确判断 Safari 打印样式是否已经生效。
