如何在CSS @media print中实现打印页码？现有方案在Chrome/Firefox失效

我之前踩过这个坑！浏览器对CSS @page 模块的计数器实现确实有不少细节要注意，尤其是Chrome和Firefox的表现差异。你用的MDN代码之所以不生效，主要有几个关键原因，我给你梳理下可行的解决办法：

核心问题分析 #

直接在@top-right里写counter-increment: page在现代浏览器里大概率不生效——因为浏览器对@page内部的计数器递增逻辑支持不一致，而且很容易因为页边距不足导致页码被页面内容完全挡住，你根本看不到它。

可工作的实现方案 #

下面是我验证过在Chrome和Firefox都能正常显示页码的代码，附带关键注释：

/* 仅在打印模式下生效 */
@media print {
  /* 初始化页码计数器，从1开始 */
  body {
    counter-reset: page 1;
  }

  /* 定义打印页面的尺寸和边距——这步至关重要！ */
  @page {
    size: A4; /* 可以换成auto自适应纸张 */
    margin: 2cm; /* 必须留出足够空间给页眉/页脚，否则页码会被内容覆盖 */
  }

  /* 设置页眉右侧的页码样式 */
  @page {
    @top-right {
      content: "第 " counter(page) " 页";
      font-size: 12px;
      color: #555;
      font-family: sans-serif;
    }
  }

  /* 给需要分页的内容容器添加分页规则，并递增计数器 */
  .page-break {
    page-break-after: always; /* 强制在该元素后分页 */
    counter-increment: page; /* 分页时递增页码 */
  }

  /* 最后一页不需要强制分页，避免多算页码 */
  .page-break:last-child {
    page-break-after: avoid;
  }
}

额外注意事项 #

1. Chrome打印设置要开启「背景图形」：Chrome默认会隐藏背景相关样式，如果你的页码有颜色或背景，一定要在打印预览的「更多设置」里勾选「背景图形」，否则可能看不到页码。
2. 总页数显示（可选）：如果需要显示总页数，可以用counter(pages)，比如content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";——Chrome和Firefox现在都支持这个计数器了。
3. 避免内容溢出页边距：确保页面内的内容不会超出@page设置的margin范围，否则会覆盖页码区域。可以给正文内容加margin: 0 auto; max-width: 18cm;（对应A4纸2cm边距的内容宽度）。

测试方法 #

写完代码后，直接用浏览器的打印预览（Ctrl+P/Command+P）查看效果，不要只看页面渲染——因为@page和打印媒体查询的样式只会在打印预览或实际打印时生效。

内容的提问来源于stack exchange，提问作者niklaus