浏览器支持CSS页码

所以我知道这个选项: 与CSS / HTML的页码 。

目前看来,将页码添加到页面的打印版本是最好的方法,但是我无法获得任何变化,无法在任何地方使用。 我已经在Chrome,Firefox和IE9的Windows 7机器上尝试过了。 根据一些链接,看起来这可能在更多专有软件(如Prince XML)中得到支持。 Web浏览器是否支持打印版本?

我已经尝试做一个空白的HTML文件,并在两个样式标签之间添加了这个:

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

我也简化了它,甚至只是使用content: "TEXT"; 看看我能不能拿出东西出现 这是支持任何地方? 通过“这个”,我具体指的是@page@bottom-right标签,因为我已经获得了很多次的内容。

这似乎不工作了。 出现它只工作了很短的时间,浏览器的支持被删除!

根据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支持这一点。

我一直在试图实现分页媒体,并根据这个维基百科页面发现,目前还没有浏览器支持边界框。 难怪这不行!

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets);

请参阅表格,语法和规则,保证金框部分。 页边编号以及页眉和页脚都需要页边距框。 实现这个实现将节省我不得不将打印的媒体转换为PDF的开销。

不使用@page,但我已经得到纯粹的CSS页面号码在Firefox 20中工作:

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

要打印,请右键单击结果框(右下angular)并select

这个框架 – >打印框架…

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> 

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