仅用CSS为打印HTML页面添加页码：相关CSS语法是否仍受支持？

你的CSS语法是否受支持？ #

这段基于计数器的CSS语法目前仍被现代主流浏览器（Chrome、Firefox、Edge、Safari）支持，但单独使用这段代码无法正常工作，需要配合打印样式的关键规则才能生效。

正确的定义方式 #

要实现每页显示页码，需要完成计数器初始化、固定页脚位置两个核心步骤，完整代码如下：

/* 页面基础设置：初始化计数器+预留页脚空间 */
@page {
  counter-reset: page 0; /* 初始化页码计数器，从0开始（counter-increment会先加1） */
  margin-bottom: 2cm; /* 给页脚留出足够空间，避免被内容覆盖 */
}

/* 定义页脚的固定位置 */
#pageFooter {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* 生成页码内容 */
#pageFooter:after {
  counter-increment: page; /* 每次触发时页码+1 */
  content: "第 " counter(page) " 页"; /* 自定义页码显示文本 */
}

关键说明：

• @page是打印样式的专属规则，用于配置打印页面的全局属性，必须初始化计数器（counter-reset），否则部分浏览器会出现页码从0开始的问题。
• position: fixed是让页脚固定在每页底部的核心，没有这个属性，页脚只会出现在最后一页的末尾。
• 可根据需求调整content的文本格式，比如改为"Page " counter(page)实现英文页码，若需显示总页数，可结合JavaScript计算后注入。

替代方案（针对特殊场景） #

如果遇到老旧浏览器（如IE11及更早）或复杂动态内容导致CSS计数器失效的情况，可尝试以下方案：

1. JavaScript动态插入页码 #

通过计算打印页面的高度，在内容分页位置手动插入页码元素：

• 先结合打印样式的页边距，计算出单页打印区域的高度。
• 遍历页面内容，当累计高度超过单页高度时，插入带页码的页脚元素，并重置高度计数器。
• 打印完成后移除插入的临时元素。

2. 强制分页+手动添加页码 #

使用CSS分页符强制内容分段，在每个分段末尾添加页码：

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

在动态生成HTML时，每完成一页内容就插入带页码的页脚元素和分页符，适合内容结构固定的场景。

3. 转换为PDF后添加页码 #

将动态HTML转换为PDF文件（使用客户端PDF生成库），利用PDF库的内置功能添加页码，这种方案兼容性最好，适合需要保存或分享打印文档的场景。

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