Question

我尝试使用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文件，最后我验证内容。在不同的浏览器中，输出有点不同，但我无法看到正确的页码。

OS：Linux Mint

浏览器：Chromium 25.0.1364.160，Firefox 20.0.1，Opera（最新来自包管理器）

有什么想法吗？

Answer 1

浏览器对此的支持不符合标准。

新版本的Firefox支持

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

Answer 2

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

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

<!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>

CSS页码不起作用

2 个答案: