CSS页码不工作 [英] CSS page numbers not working
问题描述
我尝试使用CSS3的 @page 和计数器（页面）功能，无法看到添加到打印输出的任何页码。无论我做什么，看起来这都不工作。
I've tried to play around with @page and counter(page) features of CSS3, but I can't see any page numbers added to the print output. No matter what I do, looks like this is simply not working.
我的棚架看起来像这样：
My scaffold looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
<head>
<body>
<div>
Lorem ipsum dolor...
/* this gets long, 2 pages of text */
</div>
</body>
</html>
我测试这个的方式是我打开浏览器中的页面，打印它到一个PDF文件，最后我验证的内容。在不同的浏览器中，输出有点不同，但无法看到正确的页码。
The way I'm testing this out is that I'm opening the page in the browser, printing it to a PDF file and finally I'm verifying the contents. In different browsers the output is a bit different, but nowhere I can see proper page numbers.
操作系统：Linux Mint
OS: Linux Mint
浏览器：Chromium 25.0.1364.160，Firefox 20.0.1，Opera（最新的软件包管理器）
Browsers: Chromium 25.0.1364.160, Firefox 20.0.1, Opera (latest from package manager)
任何想法？
推荐答案
浏览器对此的支持不高。
Browser support for this is not up to par.
@page {margin：2in}在新版本的Firefox中受支持，但不支持@page的其他参数。我相信其他浏览器也是如此。
@page {margin: 2in} is supported in new versions of Firefox, but not other parameters of @page. I believe this is true of other browsers as well.
这篇关于CSS页码不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
