Question

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

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

Answer 1

您的特定代码有几个讨论项目，这些内容都是正确的，但这些问题会导致您的问题。

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

某些浏览器不会对具有float和/或width 父的div进行分页。

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

我无法告诉您为什么要在12宽度上进行嵌套，但是如果您可以将其删除，那么您的分页功能就可以了。

我个人也在一个独立的分隔符标签（一个div或一个span）中分页 - 这使得代码更容易阅读，如果我可以设置标签的样式希望。

您也不需要row每一行，只需clearfix新行＆＃39;，这样我们就可以使用相同的分隔符的

您的代码的非嵌套重写因此可以正常工作（或者在我的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 - 在这种情况下它是多余的。）

Answer 2

确保包含page-break-after: always;的元素没有将float属性设置为除none;以外的其他值的父级，同时检查它是否为block元素。如果它是inline-block元素，则根本不会应用分页符。

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

2 个答案: