Chrome和Edge打印页眉页脚无法通过CSS关闭，因浏览器强制控制；唯一可靠方式是手动取消打印设置中的「页眉和页脚」，或通过Puppeteer等工具导出PDF时设displayHeaderFooter: false。
Chrome 和 Edge 打印时页眉页脚无法关闭？用 @page 无效是正常的
浏览器（尤其是 Chrome/Edge）的打印页眉页脚（如网址、页码、日期）由用户代理样式强制控制，@page 规则和 CSS 的 margin、padding 都无法覆盖。这不是你写错了，是浏览器故意不让你动——出于可追溯性和无障碍访问考虑。
实操上唯一可靠方式是通过打印设置界面或 JavaScript 调用时传参干预：
- 手动打印时：点开 Chrome 打印预览 → 取消勾选「页眉和页脚」（位置在「更多设置」折叠区里）
- 用
window.print()时：无法通过代码自动关闭，必须依赖用户手动关闭；部分企业内网可通过部署 Chrome 策略（PrintHeaderFooterEnabled设为false）统一禁用 - 导出 PDF 场景：若用 Puppeteer，需显式设置
printOptions: { printBackground: true, displayHeaderFooter: false }
Firefox 能用 CSS 关掉页眉页脚？只对 @page 的 margin 有效
Firefox 是目前唯一允许部分 CSS 干预的主流浏览器，但仅限于“挤压”空间，并非真正隐藏。它不会删掉页眉文字，只是把默认 margin 改小，让内容顶上去盖住一部分。
例如：
立即学习“前端免费学习笔记（深入）”；
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
这能压掉 Firefox 默认的上下 1cm 页边距，但页眉文字（如 URL）仍可能被截断或重叠显示——取决于字体大小和实际渲染精度。别指望它完全干净，尤其多页文档中页码容易错位。
用 media="print" 样式隐藏元素，但别误删关键结构
虽然不能动浏览器生成的页眉页脚，但你可以控制自己页面里的“伪页眉”，比如顶部导航栏、logo、标题栏。常见错误是直接给整个 header 加 display: none，结果导致打印内容从第二屏开始截断（因为原本 header 占位被清空，布局塌陷）。
更稳妥的做法：
- 用
visibility: hidden或height: 0; overflow: hidden保留占位，避免重排 - 给打印专用区域加 class，比如
<div class="print-only">...，配合@media print { .print-only { display: block; } } - 避免在
@media print中修改position: fixed元素的display，它们在打印时行为不一致，Chrome 可能直接忽略
PDF 导出替代方案：为什么 Puppeteer / wkhtmltopdf 更可控
如果最终目标是生成 PDF（而非浏览器原生打印），硬刚浏览器 UI 设置意义不大。Puppeteer 的 page.pdf() 或 wkhtmltopdf 的命令行参数，能真正绕过 UA 样式限制。
关键参数示例：
- Puppeteer：
displayHeaderFooter: false彻底关掉页眉页脚；headerTemplate/footerTemplate可自定义 HTML 片段（支持{{page}}变量） - wkhtmltopdf：
--no-pdf-compression --margin-top 0 --header-html header.html，注意--header-html必须是完整 HTML 文件路径，不是内联字符串 - 兼容性提醒：wkhtmltopdf 对 Flex/Grid 支持较弱，复杂布局建议用 Puppeteer + Chromium 最新版
真实项目里，只要不是必须走用户本地打印对话框，优先走服务端 PDF 渲染——控制力强，一致性高，也避开了每个浏览器各搞一套的麻烦。
