Question

亲爱的，我尝试了CSS位置：固定属性，但它在Firefox和IE上运行正常（黑客入侵IE6），但它根本不适用于Chrome。我认为最新的Chrome会很容易支持它，但事实并非如此。我试过＆lt; thead＆gt;，＆lt; tfoot＆gt;＆lt; tbody＆gt;再次适用于IE和Firefox，但在Chrome中有问题。请任何人都有替代解决方案。

Answer 1

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。亲切的问候，mtness。

Answer 2

编辑：显然错误已经修复，因此我在下面分享的库可能不再有用了。

在我的所有研究中，没有办法让position: fixed在Chrome中运行是正确的。以下是Chromium项目页面上bug的链接。

与此同时，我创建了this open-source project that allows you to print headers and footers in Chrome。它处于开发的早期阶段，但它的工作原理取决于HTML布局的结构：

这是一项正在进行中的工作，它在很大程度上依赖于CSS Regions Polyfill。但我正在使用这个库中的技术对工作中的项目产生很好的效果。

Answer 3

我使用表格完成了，但仅限于chrome中的标题。我将重复内容放在thead标签上，并将页面内容放在tbody中，因此浏览器解释正确。

但是，我在大内容HTML中遇到了一个错误。在某些情况下，内容与标题重叠。在我发布此日期之前，仍未找到解决方案。

When printing tables in Google Chrome, content overlaps header

Answer 4

	  	  thead.report-header {
   display: table-header-group;
}

tfoot.report_footer_Mh {
   display:table-footer-group;

}

	  tabel.report-container {
    page-break-after: always;
}

<table class="report-container"  cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
  
  <!-- place the header part here-->
  <thead class="report_header_Mh">
    <tr>
      <th class="report_header_cell_Mh"> 
        <div class="header_info_Mh">
          
        </div>
      </th>
    </tr>
  </thead>
  <!-- Header Ends here--> 
  
  <!-- Place the Main Content here-->
  <tbody class="report_content_Mh">
    <tr>
      <td class="report_content-cell_Mh">
      <div class="main_Mh">
       
      </div>
      </td>
    </tr>
  </tbody>
  <!-- Main Content ends here--> 
  
  <!--Place Footer content here-->
  <tfoot class="report_footer_Mh">
    <tr>
      <td class="report_footer-cell_Mh">
         <div class="footer_info_Mh">
          
        </div>
        </td>
    </tr>
  </tfoot>
  <!-- Footer Ends here-->
</table>

	 

It worked for me try this way

Answer 5

这是我使用的代码。注意我将html和body height都设置为100％。

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}

在所有浏览器（Chrome）上从网站的每个打印页面打印页脚

5 个答案: