html - 打印html时在页面上打印页码

Question

我已经阅读了很多关于打印页码的网站，但是当我尝试打印时仍然无法在我的 html 页面上显示它。
所以接下来是CSS代码:

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

我试过把这个页面规则放在里面

@media all {
    *CSS code*
}

在它之外，试图将它放在 @media print 中，但没有任何帮助我在我的页面上显示页码。我尝试过使用 FireFox 和 Chrome(如您所知，基于 WebKit)。我认为问题出在我的 html 或 css 代码中。
有人可以给我一个在包含多个页面的大 html 页面中实现此 @page 规则的示例吗？我只需要 html 页面的代码和 css 文件的代码，就可以了。
附言我有最新支持的浏览器版本。

Answer 1

由于带有页码的@page 目前在浏览器中不起作用，所以我正在寻找替代方案。
我找到了一个 answer由 Oliver Kohll 发布。
我会在这里重新发布，以便大家更容易找到它:
对于这个答案，我们不使用@page，这是一个纯 CSS 答案，但适用于 FireFox 20+ 版本。这是 link一个例子。
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>

这样您就可以通过将参数编辑为#pageFooter 来自定义您的页码。我的例子:

#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

这个技巧对我很有效。希望对您有所帮助。