如何设置CSS打印时的页眉页脚内容_利用@page与content伪类-css教程-PHP中文网

@page 的 @top/@bottom 区域不支持动态内容，仅 Chromium ≥120 支持静态字符串和 counter(page)；attr()、var() 等均被规范禁止，跨浏览器稳定方案是 DOM + fixed 定位 + @media print。

如何设置css打印时的页眉页脚内容_利用@page与content伪类

@page 的 @top / @bottom 区域在绝大多数浏览器中无法可靠显示动态内容，Chrome ≥120 是目前唯一部分支持的内核，且仅限静态字符串和 counter(page) —— 这不是写法问题，是规范与实现的硬性限制。

为什么 `@page { @top-center { content: attr(data-title); } }` 一定不生效

CSS Paged Media 规范明确禁止在 @page 的 content 中使用 attr()、url()、CSS 变量、html 或 JS 衍生值。所有主流浏览器（包括 Firefox、Safari、旧版 Chrome）都严格遵循该限制。attr(data-title) 在 @page 内属于语法无效，解析时直接忽略，不会报错，也不会 fallback。

常见错误现象：

开发者在上设属性，期待页眉自动读取——实际页眉空白或回退到浏览器默认
用 :root { --title: "销售报告"; } + content: var(--title); —— 完全无效，var() 不在 @page 允许函数列表中

`@page :first` 和 `@page :right` 的真实兼容性边界

这些伪类本身被广泛支持（Chrome、Edge、Firefox、Safari 都认），但它们内部的 @top/@bottom 声明几乎只在 Chromium ≥120 中触发渲染；Firefox 和 Safari 解析到就跳过，不报错也不显示。

实操建议：

若必须用 @page，只在 @media print 中为 Chromium 用户提供基础页码：@page { @bottom-right { content: "Page " counter(page); } }
counter(pages) 在 PDF 导出（如 Chrome “另存为 PDF”）中大概率显示为 NaN，不能用于正式交付文档
双面打印的 :left/:right 仅影响页边距，对页眉页脚定位无实质帮助——因为 @top-left 等在非 Chromium 下根本不可用

真正跨浏览器可用的页眉页脚方案：DOM + `@media print` + `fixed`

放弃 @page 的页眉页脚区域，改用绝对/固定定位的 DOM 元素，配合分页控制，是当前唯一稳定路径。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

关键点：

每页内容包裹在独立容器中，设 break-after: page（或旧式 page-break-after: always）
每个容器内插入和
@media print 中定义：.print-header { position: fixed; top: 0; width: 100%; height: 24mm; }，并显式设置 body { margin-top: 24mm; } 避免重叠
动态内容（如章节名）用 JS 注入对应页的 .print-header，再调用 window.print() —— 此时内容已渲染，无兼容性问题

示例片段：

@media print {
  .print-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 24mm;
    font-size: 10pt;
    text-align: center;
  }
  body {
    margin-top: 24mm;
  }
}