对CSS页码浏览器支持(Browser Support for CSS Page Numbers)

所以我知道这个选项的：用CSS / HTML页面数。

这似乎迄今为止是页码添加到页面的打印版本的最佳方式，但我不能让这个任何变化在任何地方工作。我已经试过我的Windows 7计算机在Chrome，火狐和IE9上。基于一些它看起来像这样的链接可能会像王子XML更多的专有软件的支持。这是通过网络浏览器打印的版本支持？

我曾尝试做只是一个空白的HTML文件，并在头两个样式标签之间添加此：

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

我还简化甚至只使用content: "TEXT"; 看看我是否能得到的东西展现出来。这是在任何地方支持？通过“这个”我专门意味着@page和@bottom-right标签，因为我已经得到了内容合作多次。

Answer 1:

这似乎并没有工作了。 似乎只工作了很短的时间和浏览器支持被删除了！

计数器必须重置，然后才能使用它们，根据https://developer.mozilla.org/en-US/docs/CSS/Counters 。

您可以设置起始号码什么的，默认为0。

例：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... 理论上。在现实世界中唯一PrinceXML支持这一点。

Answer 2:

我一直在试图实现页面媒体以及和发现，根据本维基百科页面，那有保证金盒没有浏览器的支持，但。难怪它是行不通的！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets）

请参阅下表，语法和规则，边缘框部分。保证金箱子是什么需要的页码以及运行页眉和页脚。得到这个实现将开销节省了我要打印的介质转换为PDF格式。

Answer 3:

不使用@页，但我已经得到了纯CSS页面数在Firefox 20的工作：

http://jsfiddle.net/okohll/QnFKZ/

要打印，请右键单击结果框架（右下）和选择

这架 - >打印架...

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>

Answer 4:

通过Mozilla的，（打印文档）

这使页眉和页脚每个打印页上。这种运作良好在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>

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;
}

文章来源: Browser Support for CSS Page Numbers