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>

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



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

Answer 1

我无法帮助解决奇怪的 wifi 问题...但至于大小一致，您应该确保 所有 您的测量值在 打印机友好单元 .

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

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

尝试指定 font-size在 pt和 width/margin在 cm或 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但是你需要调整这个尺寸才能让它正确。