小编Lod*_*uza的帖子

打印时是否可以在Chrome中使用CSS3 / 2添加页码？

我相信我已经测试了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>

Run Code Online (Sandbox Code Playgroud)

另一种解决方案（HTML5不支持@page）：

@page {
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}

Run Code Online (Sandbox Code Playgroud)

截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40

相似的线程（旧的，Chrome没有分辨率）：