修复了CSS3运行的打印标题

Question

修复了CSS3运行的打印标题

我正在尝试使用此处position: running所述的实现固定打印标头

不幸的是,在Chrome和FF中,标题仅显示在第1页.现代浏览器是否支持此功能,如果支持,如何在每个页面上显示？

我已经尝试过,并且没有90px的大余量.

<html>
<head>
    <style type="text/css">
            div.header { display: none }
            @media print {
                div.header {
                    display: block;
                    position: running(header);
                }
                @page { @top-center { content: element(header) }}
                @page { margin-top: 90px; }
            }
    </style>
</head>
<body>

<div id="header" class="header">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

    Lorem ipsum dolor sit amet, denique adversarium cum ei. Mea lobortis antiopam in. Pro ex congue ceteros. Vel clita eruditi pericula ea, no everti delicatissimi vis, adhuc oportere in vix. Forensibus interesset qui ne, vis at senserit periculis. Rebum urbanitas ex eos, ei sea zril admodum sadipscing.<br><br>

Vim atqui corrumpit percipitur ad, elitr aliquam suscipit eum an. An graecis explicari sed, ad pri elit iudico expetenda. Quis harum audiam at mel, ea modus atomorum assueverit has. In movet tollit cum, idque oblique vis ut.<br><br>

Vel ex dicunt discere temporibus. Ullum consul molestiae has cu, vel liber definitiones no. Sed ut ridens perpetua, vis ex facer velit patrioque. Has idque iriure delectus te. No dicta diceret accommodare vel, has omnium antiopam ne. Deleniti efficiantur vis id, oratio epicuri forensibus ne vis.<br><br>

Eum an mazim nonumy. Consul delectus cu vis, nihil delectus conceptam et usu. Quem laoreet nonumes te mea. Movet consul et mei, possim numquam id per.<br><br>

Ea vel summo dolorem expetenda, te justo lucilius sit. Id vel hinc accusamus assueverit, ea vis errem animal. Id vis dico vide velit, forensibus voluptatum id ius. Ponderum facilisi te per, nobis neglegentur id his, impetus minimum per an. Quod exerci aeterno ius eu, ne vix meis nonumes deterruisset, dolor complectitur ex per.<br><br>

Et iudico platonem mei, cu erant denique vel, no labores dissentiet ius. Ne quis meis sed. Ei vel ullum ignota molestiae, congue vocent similique at has. Ne per delenit inciderint.<br><br>

Enim iracundia incorrupte in eam, sit in assum tincidunt. Id per diam deseruisse, qui no praesent temporibus consequuntur, eos te elit ceteros referrentur. Esse eleifend omittantur sea ei, usu cu maiorum contentiones, eum fabulas dignissim ei. Eu quo inani melius, et autem omnesque sit.<br><br>

[.....tons more text.....]

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Zac*_*ier 2

看起来虽然你的语法是正确的，但浏览器还不支持position: runningor running-head。它仍然是 W3C 编辑草案，在撰写本文时于 2014 年 3 月 11 日更新，因此看起来我们稍后可能拥有这种能力，但距它们提出已经有好几年了。这可能是因为 W3C 认为这应该由浏览器的打印功能来处理。您可以在此 jsFiddle 中查看您的浏览器当前是否支持此功能（警告：打开打印页面）

我建议使用自定义@media print设置来访问现代浏览器来执行您想要执行的操作。这确实要求您为每一页打印都有一个元素，每次重复（隐藏在网络视图上）标题

.header { display:none; }
.container:first-of-type .header { display:block; } // Only show first
@media print { // Show the rest when printed
    .header { position:fixed; margin-top:-50px; display:block; }
    .spacer { padding-top:50px; }
}

Run Code Online (Sandbox Code Playgroud)

演示（警告：打开打印页面）

您还可以使用应用于容器的伪元素来执行类似的方法，从而消除每次都需要 h2 的需要。但这仍然要求您有一个每次都包含完整页面的容器。演示（警告：打开打印页面）

话虽这么说，您可以使用Flying Saucer（您链接的问题正在使用它）来执行此操作，但它仅支持 CSS 2.1。其他替代方案包括使用 PDF 生成器为每个页面添加标题

归档时间：	12 年，2 月前
查看次数：	729 次
最近记录：	12 年，2 月前