打印网页时，页眉和正文内容重叠的问题在使用打印模式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从第二页开始就不起作用了。

- samz22

---

你尝试过使用 clear:both; 吗？这样可以正确地分隔各个部分。 - Syfer

“html的CSS在第二页不起作用” - 实际上是起作用的，但您对其实现的理解是错误的。只有一个html元素，并且它从第一页开始 - 这就是应用顶部边距的地方。您可能想要为@page指定适当的边距。 - CBroe

如果我给页面标题应用边距，那么它也会下降。 - samz22

@Syfer 只有在存在浮点数时才有帮助，它不会做其他任何事情。 - Mr Lister

@samz22，你找到解决方案了吗？ - Haroon

Answer 1

看起来这个任务无法仅使用CSS进行适当实现。

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

该链接内容的简要概述：IE和Firefox将在每个打印页面上重复显示<thead>元素，而<tbody>将连续打印而不重复。

- Patrick