@page :first 在 chrome 和 edge 中不生效，仅 firefox 在真实打印预览中支持；它仅作用于物理首页且只接受 margin、size 等有限属性；跨浏览器方案应改用 break-before: page + js 动态 class 控制 padding-top。
@page :first 在 Chrome 和 Edge 中根本不会生效
你写 @page :first { margin-top: 4cm; } 却没看到效果？不是语法错，也不是漏了 !important，而是 Chrome（稳定版）和 Edge 目前（2026 年）压根不解析这个伪类——它会被静默降级为普通 @page 处理。Firefox 虽然支持，但仅在真实打印预览（Ctrl+P 打开的窗口）中有效；DevTools 的 “Emulate media” 模式完全不触发。Safari 对 @page :first 的支持更弱，基本可视为不可用。
@page :first 只作用于物理首页，且只接受有限属性
@page :first 不是“第一个带 class=‘first’ 的 div”，而是浏览器最终输出时**物理上第一张纸**的样式入口。它只在内容足够撑满至少一页时才匹配；如果页面总高不足一页，它仍会生效，但你可能看不到差异。更重要的是，它只接受极少数 CSS 属性：
-
margin、size、marks、bleed等物理纸张相关属性可用 -
color、font-size、background等视觉属性写上去也无效 - 不能嵌套在
@media print里：@media print { @page :first { ... } }→ 全部浏览器忽略
真正跨浏览器可控的首页边距方案
别赌 @page :first，改用组合策略：用 break-before: page 主动推新页，再靠 JS + class 控制视觉偏移。
- 给封面或首页容器加一个明确的分页锚点：
<div class="print-cover" style="break-before: page;"></div> - 打印前用 JS 给
加 class：document.body.classList.add('print-first-page'); - 在 CSS 中写：
body.print-first-page > .print-cover { padding-top: 40mm; }（注意是padding-top，不是margin-top，避免和@page margin叠加错乱） - 同时保留基础
@page { margin: 15mm; }（必须顶层、单位用mm或cm）
容易被忽略的兼容性硬伤
即使你把所有语法都写对，仍有三处常被跳过的现实约束：
-
break-before: page在display: flex或grid容器的子项上大概率失效——得在外层包一层div并对其设置 -
@page规则若写在组件内联style或 JS 动态注入的样式块里，Chrome 会直接丢弃 - 用户在打印对话框里选了“最小边距”或“无边距”，会覆盖掉你写的
@page margin——这不是 bug，是浏览器故意留的用户控制权
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
