html - 使用打印模式 css 打印网页时页眉和正文内容重叠

Question

我必须在每个页面中打印带有自定义标题的网页， 下面是我的打印媒体 CSS 代码

  @media screen {
      header.onlyprint, footer.onlyprint,.watermark{
          display: none; /* Hide from screen */
      }

  }
  @page {
    size:A4;

 }
  @media print {
    @page {
            size:auto;
            margin-top:2mm;

   }
   html{
     margin-top: 20mm;
   }
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
        margin-top: 0;
    }
  } 

HTML 代码是:

 <header class="onlyprint">
      <img src="images/logo.png"/>
 </header>

但问题只是在第一页中 Logo 打印正确，而从第二页开始， Logo 与正文内容重叠。HTML 的 CSS 从第二页开始不起作用。

Answer 1

似乎仅用 CSS 无法正确实现此任务。

我在此处使用表格找到了 IE 和 Firefox 的解决方法:http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/

该链接内容的快速摘要:IE 和 Firefox 将重复 <thead>每个打印页面上的元素，而 <tbody>将连续打印，不重复。