浏览器支持CSS页码

Question

所以我知道这个选项:带有CSS/HTML的页码.

到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本？

我试过制作一个空白的html文件,并在头部添加两个样式标签:

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

我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方？通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.

Answer 1

我一直在努力实现分页媒体,并且已经发现,根据这个维基百科页面,目前还没有浏览器支持边距框.难怪它不会起作用!

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

请参阅表格,语法和规则,边距框部分.边距框是页面编号以及页眉和页脚运行所需要的.实现这一点将节省我必须将打印介质转换为PDF的开销.

Answer 2

没有使用@page,但我已经获得了在Firefox 20中使用的纯CSS页码:

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 3

这似乎不再起作用了。看来它只工作了很短的时间，浏览器支持被删除了！

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