html - 谷歌浏览器在不同的计算机上处​​理分页符的方式不同

Question

我正在为 Web 应用程序中呈现的报告最终确定打印样式表，并且已收到有关不同机器上的一些打印问题的通知。在我的页眉之前添加分页符时，我注意到大量添加的空白，这似乎与分页符有关。当我background-color: green在页面的页眉或页脚中添加 , 等时，空白显然不是由于任何一个。我的 Windows 10 操作系统机器和我作为备份的 Mac 操作系统都创建了一个打印预览文档，该文档按照我的预期尊重分页符，但另一台运行 Windows 10 的机器显示了添加的空白。

更新- 遇到分页符问题的其中一台机器仅在特定 WiFi 连接上遇到问题。当连接到我工作位置的WiFi时，问题似乎从他的机器上消失了，但是当连接到他工作位置的WiFi时，问题又出现了。很诡异....

我正在申请page-break-before: always我的标题内容，我的网站代码如下：

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

* {
  box-sizing: border-box;
}

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.report-row-preview {
  min-height: 4cm;
}

.header {
  margin-top: 1cm;
  page-break-before: always;
}

.footer {
  margin-top: 1cm;
}

.copyright {
  text-align: center;
  font-size: 10px;
  margin-bottom: 0;
}

@media print {
  html,
  body {
    width: 216mm;
    height: 279mm;
    background-color: white;
  }
  .page-portrait {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 4%;
    width: 100% !important;
  }
  .no-print {
    display: none !important;
  }
}

<div class="row page-portrait">
  <div class="row header">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row footer">...</div>
</div>

最后，这是我所指的添加的空白区域的屏幕截图：

很高兴在必要时提供更多的清晰度，我只是用这个把头撞到墙上。

标签： htmlcssgoogle-chromeprint-css

Answer 1

我对奇怪的 wifi 问题无能为力……但至于一致的尺寸，您应该确保所有测量值都在打印机友好的单位中。

我的猜测是你得到了额外的空间，因为每个操作系统/机器在打印时都在解释px并且不同。percent

尤其如此，font-size根据屏幕密度的转换方式可能会有所不同。这反过来又会导致您的page-break规则和包装规则位于不同的位置。这会产生不同的间距。

尝试指定font-sizeinpt和width/ marginincm或mm

例如你有这个规则：

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

我会改为：

margin-top: 1cm;
margin-bottom: 1cm;
width: 210mm;

也font-size: 10px可能转换为，font-size: 8pt但您需要使用该尺寸才能使其正确。