亲爱的,我尝试了CSS位置:固定属性,但它在Firefox和IE上运行正常(黑客入侵IE6),但它根本不适用于Chrome.我认为最新的Chrome会很容易支持它,但事实并非如此.我试过<thead>,<tfoot> <tbody>再次在IE和Firefox中工作,但在Chrome中有问题.请任何人有一个替代解决方案.
mtn*_*ess 18
Chrome [webkit]似乎有不同的处理位置的方式:在打印样式表中修复,而不是其他浏览器.
因此,目前这个问题的答案是:
Chrome中没有适当的解决方案.
虽然FF和IE在每个页面上呈现它,但Opera根本不显示它,而webkit浏览器只在第一页上显示它.
小测试文件:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
@media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>可在此处找到更多资源:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
测试页面:http:
//www.andypemberton.com/sandbox/watermark/
HTH.亲切的问候,健康.
编辑:显然错误已经修复,因此我在下面分享的库可能不再有用了.
从我的所有研究来看,没有办法position: fixed在Chrome中工作是正确的.以下是Chromium项目页面上的错误链接.
与此同时,我创建了这个开源项目,允许您在Chrome中打印页眉和页脚.它处于开发的早期阶段,但它的工作原理取决于HTML布局的结构:
这是一项正在进行的工作,它在很大程度上依赖于CSS Regions Polyfill.但是我正在使用这个库中的技术对工作中的项目产生很好的影响.
tim*_*tim -10
这是我使用的代码。注意我将 html 和 body 高度设置为 100%。
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}