css - Safari 内部分页 :avoid not working

Question

我的 CSS page-break-inside: avoid 有问题。我有一些设置了此 css 属性的打印 block ，但是 Safari 会破坏任何内容，就像真正的分页符发生一样，而它适用于我目前测试过的所有其他主要浏览器(当前版本)。

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

至于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。

Answer 1

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

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

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