本文介绍一种基于 CSS @media print 和 position: fixed 的轻量级方案，可在 Chrome、Firefox 和 Safari 中稳定实现每页 A4 纸张顶部页眉与底部页脚的重复显示，规避 thead/tfoot 兼容性缺陷及 fixed 在非打印上下文中错位的问题。
本文介绍一种基于 css `@media print` 和 `position: fixed` 的轻量级方案，可在 chrome、firefox 和 safari 中稳定实现每页 a4 纸张顶部页眉与底部页脚的重复显示，规避 `thead`/`tfoot` 兼容性缺陷及 `fixed` 在非打印上下文中错位的问题。
在 Web 打印场景中，为多页 HTML 文档（如报表、合同、发票）自动添加统一的页眉（如公司 Logo、标题、页码）和页脚（如版权信息、页码、联系方式），是常见且关键的需求。然而，由于各浏览器对打印样式的支持存在差异，传统方法常面临兼容性挑战：position: fixed 在未限定媒体查询时会干扰屏幕渲染；/
在 Safari 中完全不生效，且 Chrome 下页脚无法锚定至最后一页底部；而 @page 规则又不支持内容注入。✅ 推荐方案：精准作用于打印媒体的 position: fixed
核心思路是仅在 @media print 上下文中启用 fixed 定位，并配合合理的文档流预留空间，确保内容不被遮挡：
/* 仅在打印时激活固定定位 */
@media print {
header,
footer {
position: fixed;
left: 0;
right: 0;
width: 21.0cm; /* A4 宽度（含 3mm 边距） */
}
header {
top: 0;
height: 4.0cm; /* 页眉高度 */
}
footer {
bottom: 0;
height: 2.5cm; /* 页脚高度 */
}
/* 关键：为主内容预留页眉/页脚空间，避免重叠 */
main {
margin-top: 4.0cm;
margin-bottom: 2.5cm;
}
}
/* 屏幕浏览时保持正常流式布局 */
@media screen {
header, footer {
position: static;
}
main {
margin: 0;
}
}? HTML 结构建议（语义清晰 + 易维护）
<body>
<header><!-- 页眉内容，如 logo、标题 --></header>
<main>
<!-- 所有正文内容放在此处 -->
<p>...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</main>
<footer><!-- 页脚内容，如页码、版权 --></footer>
</body>⚠️ 关键注意事项与最佳实践
立即学习“前端免费学习笔记（深入）”；
- A4 尺寸与边距：使用 @page { size: A4; margin: 0; } 可强制页面尺寸，但页眉页脚需额外留白（如 margin-top: 4cm），因浏览器打印预设边距（通常 1–2cm）仍会生效；
- 页码动态生成：纯 CSS 无法获取当前页码，若需「第 X 页」效果，需借助 JavaScript 注入或服务端渲染（如 Puppeteer）；
-
Safari 兼容性补丁：Safari 16+ 已良好支持 @media print 中的 fixed，但旧版需确保
/ -
图片资源稳定性：页眉页脚中的
应使用绝对路径或内联 base64，避免打印时因 CORS 或相对路径失效；
- 测试验证流程：务必在 Chrome（v115+）、Firefox（v110+）、Safari（v16+）中分别触发 Ctrl/Cmd + P → “另存为 PDF”，检查每页是否完整渲染且无内容截断。
✅ 总结：该方案以最小侵入性达成三端兼容——无需 polyfill、不依赖 JS、不修改 DOM 结构。其本质是“用对时机”（@media print）而非“用对属性”（fixed）。只要严格分离打印与屏幕样式、合理预留内容区域，并针对 Safari 做轻量校验，即可在生产环境稳定交付专业级打印体验。
