html – page-break- *不适用于Chrome和Safari

2023年8月22日 325次阅读

我知道关于这个话题有很多问题,但我仍然找不到可行的解决方案.所以,这是我的
HTML：

<div class="row">
    <div class="col-xs-12">
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
      <div class="row print-break">
        <div class="col-xs-8 col-xs-offset-2">
          <!-- Some Content -->
        </div>
      </div>
    </div>
  </div>

和css：

@media print {
   .print-break {
      page-break-after: always;
      page-break-inside: avoid;
   }
}

并且碰巧Firefox正确插入分页符; Chrome和Safari没有.

有谁知道如何克服这个问题？或者我可能错在哪里？

最佳答案 您的具体代码有几个讨论项目,这些内容都是正确的,但这些都会导致您的问题.

不幸的是,page-break-after在浏览器与浏览器之间的工作方式不同,人们不能假设行为,因此我们需要恢复到更简单的已知行为.

某些浏览器不会在具有浮动和/或具有宽度的父级的div上进行分页.

我从你的代码中假设你正在使用Bootstrap(？).代码中有一个嵌套网格：外部行/列是12宽. (为什么要在12宽的父级内部嵌套？)这个外部col设置宽度：100％,因此Safari不会对其子页面进行分页 – 因此嵌套项目不会分页.

我不知道你为什么要嵌套在12宽,但如果你可以删除它,那么你的分页符将起作用.

我个人也在一个独立的分隔符标签(div或span)中分页 – 这使得代码更容易阅读,如果我愿意,我也可以设置标签的样式.

您也不需要对每一行进行排序,只需一个clearfix’new row’,这样我们就可以使用相同的分隔符.

然后,对代码进行非嵌套式重写(或者在我的Safari中)：

<div class="row">
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 1
  </div>
  <div class="print-break clearfix"></div>
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 2
  </div>
  <div class="print-break clearfix"></div>
  <div class="col-xs-8 col-xs-offset-2">
    Some Content 3
  </div>
</div>

CSS将是：

@media print {
  .print-break {
    page-break-after: always;
  }
}

(你真的不需要@media打印 – 在这种情况下它是多余的.)

点赞