带有CSS/HTML的页码

Question

一个有趣的用例已经出现在我们面前,我们要求当我们打印一个网站时,打印的副本将有一个页面页眉和页脚,页脚内部有页码.

任何人都知道如何实现这一目标？

注意:浏览器版本可以是最新的,客户端是其他Web开发人员.

Answer 1

取决于您所需的浏览器支持.

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

进一步阅读:

它仍然不适用于chrome :( (5认同)
主要浏览器中不再支持@daVe,`@ page`边距框(http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets))Grammar_and_rules),但我已确认此解决方案可用于IE8. (5认同)
它对我来说对铬无效(第41节) (4认同)
我正在寻找更多“@page”和“@bottom-right”部分。我已经使用了内容和计数器，但无法让它实际显示在任何地方，并且无法在 caniuse 或其他地方找到它应该正常工作的地方。 (2认同)
@alex现在可以用什么替换`@ page`边距框吗？能够在IE11中打印页码确实有帮助 (2认同)
到目前为止，这些功能在任何主要浏览器中都不起作用。:) (2认同)

Answer 2

在http://www.princexml.com/howcome/2007/xtech/papers/output/0082-32/index.xhtml上有一个测试页，其css文件中包含@page内容代码。我无法在当前版本的IE，Chrome或Firefox中使用它。

截至 2015 年 12 月 3 日，主要浏览器似乎不支持像 @bottom-center 这样的边距框，如[此处](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets% 29）。如果您搜索“@bottom-center”，您会看到很多红色的“不支持”框。当您在网络上搜索时，听起来它们应该可以工作，但实际上它们尚未得到支持。分页媒体的某些元素效果很好，例如分页后，但不包括边距框。 (2认同)