浏览器原生打印页眉页脚（如url、日期、页码）属ui层固定输出，css无法删除；必须先在打印预览“更多设置”中手动关闭【页眉和页脚】开关，否则所有@media print或@page规则均无效。
浏览器原生打印对话框里显示的页眉页脚（如 URL、日期、页码）无法用 CSS 删除，@page 或 @media print 都不作用于那部分——那是浏览器 UI 层的固定输出。真正能用 CSS 控制的，只有你页面里自己写的 <header></header>、<footer></footer> 或其他自定义头尾元素。
关闭浏览器自带页眉页脚必须手动关开关
这是最直接有效的一步，跳过它，后面所有 CSS 都白搭：
- 按
Ctrl + P打开打印预览 - 在右侧设置中点开「更多设置」
- 把「页眉和页脚」开关明确设为 关闭
这步在 Edge、Chrome、Firefox 等主流浏览器中都存在，且是唯一能禁用 URL/日期/页码组合的通用方式。不关这个，哪怕你 @page { margin: 0 } 写得再狠，那些内容照样出现在纸张边缘。
@page { margin: 0 } 能压缩但不能删除浏览器页眉页脚
@page 规则控制的是分页容器的边距，不是浏览器 UI 的页眉页脚区域。它的实际效果是：
- 把内容区顶边拉到纸张物理顶部，减少“看起来像页眉”的空白
- 配合
body { margin: 0 !important }可消除页面自身上下留白 - 但对浏览器强制加上的 URL 和页码毫无影响——它们压根不在 CSS 渲染流里
典型写法：
@media print {
@page {
margin: 0;
}
body {
margin: 0 !important;
padding: 0 !important;
}
}
注意：@page 在 Safari 中支持有限，@top-center 等伪元素仅在部分浏览器中可用，且仍无法覆盖浏览器 UI 层内容。
隐藏自己写的页眉页脚要用 @media print + display: none
如果你页面中有 <header class="print-header"></header> 这类结构，这才是 CSS 真正起作用的地方：
- 给不需要打印的元素加类名，比如
class="no-print" - 在
@media print中统一隐藏：.no-print { display: none !important; } - 避免用
visibility: hidden，它仍占布局空间，可能导致意外分页 - 如果首页要特殊显示标题，可结合
:first-of-type或 JS 动态加类，纯 CSS 无法识别“第一页”语义
示例：
@media print {
.no-print,
nav,
.sidebar,
.print-header:not(:first-of-type) {
display: none !important;
}
}
Edge 用户长期禁用需改注册表 PrintHeaderFooter=0
Edge 浏览器允许通过注册表彻底关闭默认页眉页脚，适合批量部署或固定设备：
- 路径：
SOFTWARE\Policies\Microsoft\Edge - 新建 DWORD 值：
PrintHeaderFooter - 设值为
0（十进制），重启所有msedge.exe进程生效 - 此设置优先级高于打印界面开关，一旦启用，每次打印都不再出现 URL 和页码
这个值在企业组策略中也对应同一项，个人用户修改后无需再每次手动关开关——但普通网页开发者无法控制用户端是否启用该策略，所以前端样式仍需兼容“开关开着”的情况。
真正难的不是写 CSS，而是分清哪些东西 CSS 能管、哪些它根本碰不到。浏览器 UI 层的页眉页脚永远游离在样式系统之外，所有试图用 @page 或伪元素“覆盖”它的尝试，本质上都是在和渲染管线做无效对抗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
