如何防止打印时元素出现空白？

Question

我有一个最小的网页，打印为两个绿色页面，每页中间有一个蓝色框。

这是通过创建两个与页面大小相同的绿色 div 来实现的，每个 div 包含一个蓝色 div，该蓝色 div 位于距左上角 50% 的位置，然后向后平移 -50%，这是一种常见的居中技术。

body {
  /* red */
  background-color: #ffb7b7;
  margin: 0;
}

div.page {
  /* green */
  background-color: #a2ffb5;
  border-radius: 1in;
  width: 11in;
  height: 8in;
  overflow: hidden;
  position: relative;
}

div.box {
  /* light blue */
  background-color: #e2e5ff;
  /* dark blue */
  border: 7pt solid #7e89ff;
  border-radius: 1in;
  width: 5in;
  height: 5in;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media print {
  @page {
    margin: 0;
    size: landscape;
  }
  div.page {
    break-before: page;
    break-inside: avoid;
    page-break-inside: avoid;
    width: 100vw;
    height: 100vh;
  }
  div.box {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

<div class="page">
  <div class="box"></div>
</div>
<div class="page">
  <div class="box"></div>
</div>

作为网页查看时看起来不错：

但是打印的时候，第一个蓝色框的中间突然出现了一个奇怪的空缺：

这不仅仅是打印预览的错误；这也是打印预览的错误。该间隙实际上出现在打印页面或 PDF 中。奇怪的是，这个问题从来没有影响最后一页。

我尝试使用

break-inside: avoid

和

page-break-inside: avoid

，但无济于事。如何防止打印元素中出现间隙？

Answer 1

这似乎是 Chrome 中的一个错误，当某个元素落到非最后打印页面的底部以下时会触发该错误，然后使用

translate()

将其移回上方。

在这个特定示例中，我们可以通过使用替代居中技术来解决该问题。例如，更改这些行：

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

改为：

right: 50%;
bottom: 50%;
transform: translate(50%, 50%);

当元素落在页面的顶部、左侧或右侧边缘时，Chrome 似乎工作正常；该错误仅发生在底部边缘。我不知道有任何适用于所有场景的通用解决方案。