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

Question

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

打印块包含哪种类型的内容似乎并不重要，因为我已经看到这种行为，其中 table 和 canvas 元素都在中间分开.

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

我正在使用 Windows 7 和 Safari 5.1.7。

Answer 1

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

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

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

Answer 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 上

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

Safari page-break-inside:avoid not working

css

printing

safari

page-break-inside