将边框应用于 div 可防止其分页

Question

我发现了一个我无法解释的怪癖。

我有一个这样的模板结构：

<printedpage>
    <div class="print-page">
        <other divs>...
    </div>
<printedpage>

@media print {
    .print-page{
        position: relative;
        display: block;
        break-before: page;
    }

    .print-page:first-child{
        break-before: avoid-page;
        break-after: avoid-page;
        break-inside: avoid!important;
    }
}

我已将上述 css 应用于 div。当有多个.print-page 时，所有内容都会中断并按预期打印，即每个.print-page div 打印一页。

问题是当只有一个.print-page 时，第二个“空”页面会附加到 pdf 预览的末尾。当我检查仿真模式时，我看到只有一个.print-page div

似乎解决这个问题的方法是为 :first-child 样式添加边框：

.print-page:first-child{
    break-before: avoid-page;
    break-after: avoid-page;
    break-inside: avoid !important;
    border: 1px solid white;
}

为什么添加边框似乎可以解决我打破第二页空白的问题？

Answer 1

记得使用@media 规则来打印样式。

@media print {
  .print-page:first-child{
    break-before: avoid-page;
    break-after: avoid-page;
    break-inside: avoid !important;
    border: 1px solid white;
  }
}