13

我对 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 上。

4

2 回答 2

15

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

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

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

于 2015-04-01T23:38:20.510 回答
0

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

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

我的修复只是将容器的高度显式设置回浏览器默认值：

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

这在 Safari v14.1.2 上

于 2021-08-31T23:55:38.413 回答