浏览器对CSS页码的支持
所以我知道这个选项： 到目前为止，这似乎是将页码添加到打印版页面的最佳方式，但我无法在任何地方使用这种方式的任何变体。我已经在我的Windows7机器上试用了Chrome、Firefox和IE9。从一些链接来看，这可能在Prince XML等更专有的软件中得到支持。打印版本的web浏览器是否支持此功能 我试着制作一个空白html文件，并在头部将其添加到两个样式标记之间：浏览器对CSS页码的支持,css,printing,cross-browser,css-paged-media,Css,Printing,Cross Browser,Css Paged Media,所以我知道这个选项： 到目前为止，这似乎是将页码添加到打印版页面的最佳方式，但我无法在任何地方使用这种方式的任何变体。我已经在我的Windows7机器上试用了Chrome、Firefox和IE9。从一些链接来看，这可能在Prince XML等更专有的软件中得到支持。打印版本的web浏览器是否支持此功能 我试着制作一个空白html文件，并在头部将其添加到两个样式标记之间： @page { @bottom-right { content: counter(page) " of " cou
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
我还简化了它，甚至只使用
内容：“TEXT”@页面@右下@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
。。。理论上。在现实世界中，只有PrinceXML支持这一点。不使用@page，但我已经获得了在Firefox 20中使用的纯CSS页码： 要打印，请右键单击结果框（右下角）并选择 此框架->打印框架 CSS是
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
页
多页内容在这里。。。
<!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>
如果您希望在Chrome/Chrome下打印时添加页码，一个简单的解决方案是使用 这个JS库将您的HTML/CSS剪切成页面，可以打印成书，您可以在浏览器中预览。它使
@页面标题<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
.page-number{
content: counter(page)
}
print mewindow.print（）chrome或firefox（可能也不支持IE9）不支持分页媒体。CSS3应该对分页媒体有一些支持，但我也没能让它正常工作。这可能就是答案。我一直在答案和教程中找到这一点，但找不到任何有效的实现。我想这是以后要记住的另一件事。分页媒体样式表显示可能还需要其他参数。如果一个网页上有多个“页面”，您如何声明一个页面？媒体查询是否有效？然后你可以在页面右下角的一个元素上使用
@media print@page@page:first@page#pageFooter<div class="page-number"></div>
.page-number{
content: counter(page)
}