page-break-* 在 Chrome 和 Safari 上不起作用

我知道关于这个主题有很多问题，但我仍然找不到可行的解决方案。所以，这是我的 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>

And css:

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

而且 Firefox 可以正确插入分页符； Chrome 和 Safari 没有。

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

您的具体代码有一些讨论项目，这些项目单独是正确的，但一起会导致您的问题。

很遗憾page-break-after不同浏览器的工作方式不同，我们无法假设一种行为，因此我们需要恢复到一种更简单、已知的行为。

有些浏览器不会在带有 a 的 div 上分页parent有一个float和/或有一个width.

我从你的代码中假设你正在使用 Bootstrap （？）。代码中有一个嵌套网格：外部行/列的宽度为 12。 （为什么嵌套在 12 宽的父级内部？）这个外部 col 设置了一个width: 100%，因此 Safari 不会对其子项进行分页 - 因此您的嵌套项目不会分页。

我不知道为什么你要嵌套在 12 宽上，但如果你可以删除它，那么你的分页符就会起作用。

我个人也在独立的分隔符标签中进行分页（adiv or a span) - 这使得代码更容易阅读，如果我愿意，我还可以设置标签的样式。

你也不需要row每行，只有一个clearfix将“新行”，这允许我们使用相同的分隔符。

因此，对代码进行非嵌套重写就可以了（或者在我的 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 print- 在这种情况下这是多余的。）