CSS @page的@top-center、@bottom-right无法显示内容及页码的问题咨询

我帮你梳理一下用CSS @page实现打印页码时最容易碰到的几个问题，这些都是我和同行们实际开发中踩过的坑：

• 浏览器支持与打印上下文限制
  @page本身是CSS打印模块的标准特性，但不同浏览器对页码计数器（counter(page)/counter(pages)）的支持细节有差异。比如Chrome/Edge需要在打印预览模式下才能看到效果（普通页面视图不会渲染@page内容），部分旧版本浏览器可能存在兼容问题，建议用最新版主流浏览器测试。另外Firefox对counter(pages)的支持需要确保文档有明确的分页内容，空文档或单页文档可能不会触发显示。

• 计数器未正确初始化/递增
  很多人会忽略页码计数器的初始化步骤。虽然部分浏览器会自动处理，但稳妥的做法是在@page规则内显式设置计数器递增，或者在body元素上重置计数器：

  @page {
    counter-increment: page; /* 每一页递增page计数器 */
  }
  body {
    counter-reset: page 0; /* 初始页码设为0，第一页会自动变成1 */
  }
  

  如果缺少这一步，counter(page)会返回空值，自然看不到页码。

• CSS媒体类型的包裹要求
  虽然@page本身是针对打印场景的，但有些浏览器要求将@page规则包裹在@media print块内才能生效。所以最好把所有打印相关的CSS都放在媒体查询里，确保只在打印上下文触发：

  @media print {
    @page {
      /* 你的@page配置 */
    }
  }
  

• 页面布局元素的干扰
  如果页面中存在position: fixed的元素，或者某些容器设置了overflow: hidden/height: 100%，可能会挤压或覆盖@page定义的页脚区域。另外，若页面内容没有触发自动分页（比如单页内容），counter(pages)可能不会显示，建议添加足够多的内容测试分页效果。

• 浏览器打印预览的“简化模式”干扰
  像Chrome这类浏览器的打印预览里有“简化页面”选项，会自动移除自定义CSS样式（包括@page的页脚）。要确保关闭这个选项，选择“默认”模式，或者在“更多设置”里确认样式未被简化。

• 拼写或语法错误
  别小看这个细节！比如把counter(page)写成counter(pages)，或者@bottom-right拼写错误（比如写成@bottom-right-corner），都会导致页码不显示。仔细检查content属性里的计数器名称和@page伪元素的拼写。

给你一个最简可运行的示例代码，你可以先测试这个是否能正常显示页码：

@media print {
  @page {
    size: A4;
    margin: 2cm;

    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
      color: #666;
    }
  }

  body {
    counter-reset: page 0;
    font-family: Arial, sans-serif;
  }

  /* 强制分页测试 */
  .page-break {
    page-break-after: always;
  }
}

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