浏览器对 CSS 页码的支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15797161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browser Support for CSS Page Numbers
提问by David Fritsch
So I am aware of this option: Page numbers with CSS/HTML.
所以我知道这个选项：Page numbers with CSS/HTML。
It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?
到目前为止，这似乎是将页码添加到页面打印版本的最佳方式，但我无法在任何地方使用此方法的任何变体。我已经在我的 Windows 7 机器上尝试过 Chrome、Firefox 和 IE9。根据一些链接，看起来这可能在更多专有软件（如 Prince XML）中得到支持。打印版本的 Web 浏览器是否支持此功能？
I have tried making just a blank html file and in the head adding this between two style tags:
我试过只制作一个空白的 html 文件，并在头部添加两个样式标签之间的内容：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have also simplified it even to just use content: "TEXT";to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the @pageand @bottom-righttags, since I have gotten content to work many times.
我也简化了它甚至只是content: "TEXT";用来看看我是否可以显示一些东西。这在任何地方都支持吗？通过“这个”，我特别指的是@page和@bottom-right标签，因为我已经多次获得内容。
采纳答案by John Biddle
This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!
这似乎不再起作用了。看来它只工作了很短的时间，浏览器支持被删除了！
Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.
根据https://developer.mozilla.org/en-US/docs/CSS/Counters，计数器必须在使用前重置。
You can set your starting number to whatever, the default is 0.
您可以将起始编号设置为任何值，默认值为 0。
Example:
例子：
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
... 理论上。在现实世界中，只有 PrinceXML 支持这一点。
回答by Jimbo
I've been trying to implement paged media as well and have found, according to this Wikipedia page, that there's no browser support for margin boxes as yet. No wonder it wouldn't work!
我也一直在尝试实现分页媒体，并且根据这个维基百科页面发现，目前还没有浏览器支持边距框。难怪行不通！
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
See the table, Grammar and Rules, margin boxes section. Margin boxes are what's needed for page numbering as well as running headers and footers. Getting this implemented would save me the overhead of having to convert the printed media to PDF.
请参阅表格、语法和规则、边距框部分。页边距框是页码以及运行页眉和页脚所需要的。实现这一点将为我节省将印刷媒体转换为 PDF 的开销。
回答by Oliver Kohll
Not using @page, but I have gotten pure CSS page numbers to work in Firefox 20:
没有使用@page，但我已经获得了可以在 Firefox 20 中使用的纯 CSS 页码：
http://jsfiddle.net/okohll/QnFKZ/
http://jsfiddle.net/okohll/QnFKZ/
To print, right click in the results frame (bottom right) and select
要打印，请右键单击结果框（右下角）并选择
This Frame -> Print Frame...
此框架 -> 打印框架...
The CSS is
CSS是
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
and the HTML is
和 HTML 是
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
回答by user6115916
Via Mozilla, (Printing a document)
通过 Mozilla，（打印文档）
This puts a header and footer on each printed page. This works well in Mozilla, but not quite so well in IE and Chrome.
这会在每个打印页面上放置一个页眉和页脚。这在 Mozilla 中运行良好，但在 IE 和 Chrome 中不太好。
<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
Heading for paged media
</div>
<div id="print-foot">
Page:
</div>
</body>
</html>
The CSS:
CSS：
/*** Print sample ***/
/* defaults for screen */
#print-head,
#print-foot {
display: none;
}
/* print only */
@media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#print-foot {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#print-foot:after {
content: counter(page);
counter-increment: page;
}
