Safari中CSS @media print不生效的原因及解决方法

在 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 并不保证一定会执行这些打印规则

写了 @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 打印样式是否已经生效。