将边框应用于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。

似乎解决了这个，它正在为:第一个子样式添加边框：

.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;
  }
}