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

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

一个原因可能是机器具有不同的缩放设置，例如，笔记本电脑通常具有 125% 的缩放，这会影响浏览器。处理它的方法是让它在 125% 缩放时看起来不错，然后在 100% 缩放时得到一点空间，但是你会看到很多网站已经像这样工作了。

Answer 2

您必须学习如何添加 css 以便它可以在两个 WiFi 网络上运行。确保以相对形式添加 css。

<link rel="stylesheet" type="text/css" href="mystyle.css"> 而不是http://acx/we.css。 确保它是内部 css。有时当您使用外部 css 并且您有不同的连接 WiFi 和 LAN 时，您的公司安全性会发生变化。因此，基于路径的公司可能会阻止 css。 在 Chrome 的开发者工具中检查网络下的流量日志。检查 401。检查 css 在 Chrome 开发者工具中的元素下是否被覆盖。

Answer 3

我无法解决奇怪的 wifi 问题...但至于一致的尺寸，您应该确保所有您的测量值采用 打印机友好单位 .

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

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

尝试在pt 中指定font-size，在cm 或mm 中指定width/margin

例如你有这个规则：

.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，但您需要使用该大小来使其正确。