使用打印模式 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>

但问题仅在第一页徽标打印正确，而从第二页开始，徽标与正文内容重叠。HTML 的 CSS 无法从第二页开始工作。

Answer 1

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

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

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