我相信我已经测试了StackOverflow上所有可用的解决方案，但都没有在Chrome（72）中运行。我在W3C上遵循了规范，但一切似乎只能在FireFox中工作。
我只想做一个简单的事情-使用反增量将页码添加到打印的文档中。我尝试了HTML4和HTML5，但没有任何结果。
有什么解决办法吗？
Chrome版本：72.0.3626.81（官方内部版本）（64位）
解决方案在FireFox中运行良好：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
另一种解决方案（HTML5不支持@page）：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40
相似的线程（旧的，Chrome没有分辨率）：
Chromium的问题（计数器不会在每个页面上递增）：https : //bugs.chromium.org/p/chromium/issues/detail?id=774830
某些浏览器的行为相同：
铬，边缘： 页：1页：1
Firefox： 页面：1页面：2
Safari： 页面：1（一次，在第二页顶部附近）
我在整个互联网上搜索了很多天来寻找解决方案，但我找不到。一天晚上，一个想法闪过我的大脑，这就是结果（丑陋、老套，还有很多需要改进的地方，但非常简单和有效）：:-)
<html>
<head>
<style>
@page {margin: 0; size: A4}
footer {
position: absolute;
margin-left: 190mm;
}
</style>
</head>
<body>
<script>
for (var i = 1; i <= 3; ++i) {
document.body.innerHTML+= '<footer style="margin-top: ' + (297*i -10) + 'mm">' + i + '</footer>';
}
</script>
Content
</body>
</html>
Next Todo 寻求一个好的解决方案：
我的想法（但我没有让它发挥作用）：
1) 获取所有页面的计算高度 > 将 for 循环更改为 while 循环 > while 实际页脚 margin-top <= 计算高度
但我无法获得真实的高度，这是我的例子：
<script>
alert(window.getComputedStyle(document.body, null).getPropertyValue("height"));
</script>
源 Chrome getCompatedStyle 没有解决方案
2）创建999个页码并消除正文结束后的溢出。但我没有找到在相对元素之后杀死绝对元素的解决方案。
因此，让我们一起解决该任务，我们就有了最终的解决方案。
PS：目前我没有足够的积分来发表评论。所以我无法讨论，但如果有新的解决方案，我会更新我的答案。