我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的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代码中.
有人能告诉我一个@page在几个页面的大html页面中实现这个规则的例子吗？我只需要html页面的代码和css文件的代码,这是有效的.
PS我有最新支持的浏览器版本.
所以我知道这个选项:带有CSS/HTML的页码.
到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本？
我试过制作一个空白的html文件,并在头部添加两个样式标签:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方？通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.
在打印模式下,我想渲染这样的链接:
<a href="#targetPage">link</a>
像这样:
<a href="#targetPage">link (page 11)</a>
(假设目标页面位于打印预览中的11.页面上).
可以使用计数器向页面页脚添加使用纯CSS的页码,但是我可以使用更多"我想要的方式"吗？
该解决方案不需要跨浏览器(FF/Chrome就足够了),允许任何CSS/Javascript技巧.
我相信我已经测试了StackOverflow上所有可用的解决方案，但都没有在Chrome（72）中运行。我在W3C上遵循了规范，但一切似乎只能在FireFox中工作。
我只想做一个简单的事情-使用反增量将页码添加到打印的文档中。我尝试了HTML4和HTML5，但没有任何结果。
有什么解决办法吗？
Chrome版本：72.0.3626.81（官方内部版本）（64位）
解决方案在FireFox中运行良好：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
另一种解决方案（HTML5不支持@page）：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40
相似的线程（旧的，Chrome没有分辨率）：
我已经寻找这个答案有一段时间了，但找不到任何可以正常工作的东西。我有这两个想法，看起来在很长一段时间内根本行不通：
还有其他办法吗？