如何解决无法找到使反增量工作的方法Chrome / Firefox
这是一段HTML / CSS代码,由于CSS的计数器,应该在打印时打印页脚中的页码:
<html>
<head>
<style type="text/css">
body {
counter-reset: page;
}
div.footer {
display: table-footer-group;
position: fixed;
bottom: 0pt;
right: 0pt;
}
div.footer:after {
counter-increment: page;
content: "Page " counter(page);
}
p {
page-break-after: always;
}
</style>
</head>
<body>
<div class="footer"></div>
<p>Hello world page 1</p>
<p>Hello world page 2</p>
</body>
</html>
事实是,在Firefox 79.0中,我在第一页上看到“页面1”,在第二页上看到“页面”。使用Chrome 84.0,两个页面上都显示“页面1”。
我尝试使用@page规则,本机“页面”计数器(如w3中所述),但仍然找不到我所缺少的内容。
非常感谢您的帮助:)
解决方法
我认为您无法实现您想要的目标。之所以会出现“第1页”,是因为您要在div.footer:after
声明内递增计数器,该声明在HTML代码中仅出现一次。
当读取CSS计数器时,它会根据该元素在文档中的位置进行计算,如规范中所述:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
因此,就您而言,您可以这样考虑:
div.footer:after {
content: "Page " counter(page); /* when displayed,read the value of `page` */
}
p {
counter-increment: page; /* counter increments with every occurrence of a <p> tag */
}
和
<div class="footer"></div> <!-- `page` counter is always 0,as no occurrences of a <p> tag yet -->
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
或
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<div class="footer"></div> <!-- `page` counter is always 1,as there was a single occurrence of a <p> tag -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
或
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
<div class="footer"></div> <!-- `page` counter is always 2,as there were two occurrences of a <p> tag -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。