浏览器对 CSS 页码的支持 [英] Browser Support for CSS Page Numbers

问题描述

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

So I am aware of this option: Page numbers with CSS/HTML.

到目前为止，这似乎是将页码添加到页面打印版本的最佳方式，但我无法在任何地方使用此方法的任何变体.我已经在我的 Windows 7 机器上尝试过 Chrome、Firefox 和 IE9.根据一些链接，看起来这可能在更多专有软件(如 Prince XML)中得到支持.打印版本的网络浏览器是否支持此功能?

It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?

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

I have tried making just a blank html file and in the head adding this between two style tags:

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

我也简化了它，甚至只使用 content: "TEXT"; 看看我是否可以显示一些东西.这在任何地方都支持吗?'this' 我特别指的是 @page 和 @bottom-right 标签，因为我已经多次获得内容.

I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the @page and @bottom-right tags, since I have gotten content to work many times.

推荐答案

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

根据https://developer.mozilla.org/en-US/docs/CSS/Counters.

您可以将起始编号设置为任意值，默认为 0.

You can set your starting number to whatever, the default is 0.

示例:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

...理论上.在现实世界中，只有 PrinceXML 支持这一点.

... in theory. In real world only PrinceXML supports this.

这篇关于浏览器对 CSS 页码的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！