Safari page-break-inside：避免不工作答案

【问题标题】：Safari page-break-inside:avoid not workingSafari page-break-inside：避免不工作
【发布时间】：2015-03-25 14:34:36
【问题描述】：

我对 CSS page-break-inside: avoid 有疑问。我有一些设置了这个 css 属性的打印块，但是 Safari 会破坏任何内容，就像真正的分页符发生一样，而它在我迄今为止测试过的所有其他主要浏览器（当前版本）中都可以使用。

打印块包含哪种类型的内容似乎并不重要，因为我已经看到了这种行为，表格和画布元素都在中间分开。

就http://css-tricks.com/almanac/properties/p/page-break/ 和https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html 而言，它应该可以工作。通过快速搜索无法找到有关此问题的任何其他最新信息。

我使用的是 Windows 7 和 Safari 5.1.7。

【问题讨论】：

标签： css printing safari page-break-inside

【解决方案1】：

尝试使用display: inline-block; 而不是page-break-inside: avoid;。您可能还想添加 vertical-align: top; 和 width: 100%; 以使元素表现得像普通块元素而不是内联元素。

早在page-break-inside: avoid; 在大多数浏览器中实现之前，这种技术就已经可靠地工作了。它仍然是防止内容块中分页符的最可靠的跨平台方法。

如果你想让一张桌子牢不可破，你可以在上面设置display: inline-table;。或者你可以把它放在一个 inline-block div 中。

【讨论】：

在 Bootstrap 中将display: flex 更改为display: block 对我有用。感谢您为我指明正确的方向。

【解决方案2】：

page-break-inside: avoid（或其变体）在 Safari 上似乎偶尔会失败 b/c 它的使用很大程度上取决于包含元素的显示及其高度。

我的坏了 b/c 我已将包含元素的原始页面布局定义为 height: 100%，这在浏览器上看起来是良性的，但我会注意到我的元素在打印预览中的页面之间被破坏了。

我的解决方法是将容器的高度显式设置回浏览器默认值：

@media print {
    // Explicitly set height: auto
    .page-container {
        display: block;
        height: auto;
    }
    section {
        break-inside: avoid;
    }
}

这在 Safari v14.1.2 上

【讨论】：