首页 >web前端 >css教程 >为什么无法打印 HTML 格式的页码以及解决方法是什么?

为什么无法打印 HTML 格式的页码以及解决方法是什么?

Susan Sarandon
Susan Sarandon原创
2024-12-14 14:47:11668浏览

Why Can't I Print Page Numbers in HTML and What's the Workaround?

无法在 HTML 页面上打印页码?

问题描述:

尽管进行了大量研究,页码还是失败打印 HTML 文档时出现。

CSS 代码使用:

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

在 @media all 块内部和外部都尝试了 @page 规则,但没有成功。

解决方案:

由于网络浏览器的限制,使用@page实现页码是不可行的。 Oliver Kohll 提供了另一种解决方案,它利用 CSS 中基于表格的格式,而不依赖于@page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML:

<div>

自定义:

页码的外观可以通过修改来自定义#pageFooter 的属性,例如文本格式、定位和背景样式。

以上是为什么无法打印 HTML 格式的页码以及解决方法是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn