我正在尝试使用 position: running 实现固定的打印头，如 here 所述
不幸的是，在 Chrome 和 FF 中，标题仅显示在第 1 页。现代浏览器是否支持此功能？如果支持，我如何才能让它显示在每个 页面上？
我已经尝试过使用和不使用 90 像素的大边距。
<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>
最佳答案
看来虽然你的语法是正确的，但是浏览器还不支持position: running 或running-head。 It is still a W3C Editor's draft ，在撰写本文时已于 2014 年 3 月 11 日更新，所以看起来我们可能以后会有这种能力，但自从他们被提议以来已经有好几年了。这可能是因为 W3C 认为这应该由浏览器的打印功能处理。可以看看你的浏览器目前是否支持这个功能in this jsFiddle (警告:打开打印页面)
我建议使用自定义 @media print 设置来让现代浏览器执行您想要执行的操作。不过，这确实需要您为每一页打印品都有一个元素，每次都重复(隐藏在 webview 上的)标题
.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; }
}
Demo (警告:打开打印页面)
您也可以使用应用于容器的伪元素来执行类似的方法，从而消除每次对 h2 的需要。不过，这仍然需要您每次都有一个包含整页的容器。 Demo (警告:打开打印页面)
话虽如此，您可以使用 Flying Saucer (您链接的问题正在使用)来执行此操作，但它仅支持 CSS 2.1。其他替代方法包括使用 PDF 制作器为每个页面添加标题
关于html - 修复了运行 CSS3 的打印标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22769610/