问题描述
由于具有页面编号的@page暂时无法在浏览器中工作，因此我一直在寻找替代方法。 我找到了 发布的答案。 我将其重新张贴在这里，以便每个人都可以更轻松地找到它： 对于这个答案，我们 ，它是纯CSS答案，但是可以在FireFox20+版本中使用。这是一个示例链接。 CSS是：
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTML代码是：
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
这样，您可以通过将参数修改为 #pageFooter 来自定义页码。我的例子：
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-Box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
这个技巧对我来说很好。希望对您有帮助。
解决方法
我已经阅读了很多有关打印页码的网站，但是当我尝试打印html页面时，仍然无法显示它。
接下来是CSS代码：
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
我试图把这个页面规则放进去
@media all {
*CSS code*
}
在其外部，尝试将其放入中@mediaprint，但没有任何帮助使我在页面上显示页码。我尝试使用FireFox和Chrome（您知道基于WebKit的浏览器）。我认为问题出在我的HTML或CSS代码中。
有人可以告诉我一个@page在具有多个页面的大html页面中实现此规则的示例吗？我只需要html页面的代码和css文件的代码即可。
PS我拥有最新支持的浏览器版本。