CSS页码不起作用答案

【问题标题】：CSS page numbers not workingCSS页码不起作用
【发布时间】：2013-04-05 23:38:00
【问题描述】：

我尝试过使用 CSS3 的 @page 和 counter(page) 功能，但我看不到任何添加到打印输出的页码。不管我做什么，看起来这根本行不通。

我的脚手架是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <style type="text/css">
        @page {
           counter-increment: page;
           counter-reset: page 1;
           @top-right {
              content: "Page " counter(page) " of " counter(pages);
           }
        }
        </style>
<head>

<body>
        <div>

        Lorem ipsum dolor...
        /* this gets long, 2 pages of text */
        </div>
</body>
</html>

我对此进行测试的方式是在浏览器中打开页面，将其打印到 PDF 文件中，最后验证内容。在不同的浏览器中，输出有点不同，但我看不到正确的页码。

操作系统：Linux Mint

浏览器：Chromium 25.0.1364.160、Firefox 20.0.1、Opera（来自包管理器的最新版本）

有什么想法吗？

【问题讨论】：

您不需要从@page 声明中取出counter-reset: page 1 吗？否则它会重置每一页的页码。
我将此样式移至<body>，但这并没有帮助。 top-right 部分没有显示任何内容
如果您的浏览器支持 css3-pages，页面计数器会自动创建并递增，据我所知，它们都不支持。

标签： css printing

【解决方案1】：

您的文件应如下所示。请注意，页面计数器是特殊的，不需要设置和递增。

Firefox、webkit 和我认为 opera 也不支持 css3-pages，所以它不起作用。较新版本的 IE 也不会，尽管 MSDN 暗示它们会这样做。

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <style type="text/css">
        @page {
          @top-right {
              content: "Page " counter(page) " of " counter(pages);
           }
        }
        </style>
<head>

<body>
        <div>

        Lorem ipsum dolor...
        /* this gets long, 2 pages of text */
        </div>
</body>
</html>

【讨论】：

【解决方案2】：

浏览器对此的支持达不到标准。

Firefox 新版本支持@page {margin: 2in}，但不支持@page 的其他参数。我相信其他浏览器也是如此。

【讨论】：

这也是我的猜测，但人们正在写关于试验这种标记的文章，所以我迷路了。我不介意使用特定的浏览器，但我不知道哪一个可以工作！
我在这里link 回答了一个类似的问题，并且在链接到几个您可能会发现有用的有趣来源的 cmets 中。
John Biddle，我在发布我自己的帖子之前已经看过你的帖子了 :) 所以你之前能够看到生成的页面计数器，对吗？你用的是什么浏览器？
对不起，没有。我只能让利润发挥作用。不过，我只尝试过 Firefox 和 Chrome。