Google Chrome处理页面在不同计算机上的中断方式不同

Question

我正在为Web应用程序中的渲染报告完成打印样式表，并已收到有关不同机器上的一些打印问题的通知。在标题之前添加分页符时，我注意到增加了很多空白，这似乎与分页符有关。当我将background-color: green等添加到页面的页眉或页脚时，空白显然不是由于任何一个。我作为备份的Windows 10 OS计算机和Mac OS都创建了一个打印预览文档，该文档可以像我期望的那样兑现分页符，但是另一台运行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-sizein ptand width/ marginin cmormm

例如你有这样的规则：

.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但您需要调整该尺寸才能使其正确。