css - 哪些浏览器支持使用 CSS 和 page-break-inside 元素进行分页操作？

Question

我正在尝试使用 page-break-inside CSS 指令，其类将附加到 div 标签或 table 标签（我认为这可能只适用于块元素，在这种情况下它必须是桌子）。

我已经尝试了所有应该准确描述如何做到这一点的教程，但没有任何效果。这是浏览器支持的问题还是有人真正得到了这个工作，CSS的确切位看起来像这样：

@media print {

  .noPageBreak {
     page-break-inside : avoid;
  }
}

score 5 · Accepted Answer

Safari 1.3 及更高版本（不知道 4）不支持 page-break-inside （试试看，或在这里查看：http ://reference.sitepoint.com/css/page-break-inside ）。Firefox 3 或 IE7 也没有（不知道 8）。

实际上，对这个属性的支持是参差不齐的，在这一点上使用它根本没有意义。如果您的访问者中有 10% 的浏览器可以支持这一点，那您就很幸运了。

我使用的解决方案是添加

page-break-after:always

到某些 div，或在需要中断的位置添加“分页符”div。我知道，这很笨拙，因为它不能完全满足您的要求，并且会导致内容无法到达打印页面的底部，但不幸的是没有更好的解决方案（证明我错了！）。

另一种方法是创建一个样式表，删除所有无关元素 ( display:none) 并使主要内容在一个主列中流动。基本上，将其转换为单列、纯文本文档。

最后，在为打印机设计样式时避免使用浮点数和列，这会使 IE（和 FF）表现得古怪。

score 3 · Accepted Answer

Safari 1.3+ 、 Opera 9.2+ 、Konquerer和IE8都支持它，至少在某种程度上是这样。

Firefox显然仍然没有。

score 2 · Accepted Answer

自 2010 年 11 月 30 日起， Firefox不支持此功能，因此在 Firefox 4 中也不支持。
IE8确实支持 page-break-inside: Avoid - 但是当我在 IE9 上尝试此操作时，它在避免分页符方面并不是很成功（这可能是一种回归，或者 IE8 也只能在非常简单的情况下避免分页符）。
AFAIK 它不适用于任何 webkit 浏览器；当然不是铬。
它实际上可以在 Opera 中运行，甚至在真实站点上也是如此。

score 0 · Accepted Answer

作为Eamon Nerbonne 关于 IE 渲染 (IE8+) 的回答的更多信息，您需要确保浏览器处于标准模式。MSDN 上的这篇文章显示了必要的内容 - 在您的 html 中包含一个元标记来强制解决问题：

<meta http-equiv="X-UA-Compatible" content="IE=8" />

感觉很笨拙，但你有它......似乎更一致地工作。

score 0 · Accepted Answer

0

Safari 1.3 及更高版本支持page-break-inside。

于 2008-09-22T22:00:22.503 回答

score 0 · Accepted Answer

我正在尝试使用 page-break-inside CSS 指令，其类将附加到 div 标签或 table 标签（我认为这可能只适用于块元素，在这种情况下它必须是桌子）。

首先，无需猜测。只要看一下规范，你就会发现它确实只适用于块级元素。

其次，<div>元素通常是块级元素，因此应用于元素是没有问题page-break-inside的<div>。

最后，您不需要将其包装在@media. 仅@media当您只想将独立于媒体的规则应用于一种媒体时才需要，例如，如果您只想display: block对一种媒体使用。在这种情况下，您不需要对其他媒体隐藏这些规则，因为它们无论如何都只适用于分页媒体。

score 0 · Accepted Answer

从初步搜索中，很难找到浏览器对此支持的最新统计数据，但似乎 Firefox 4beta6 支持它而 Chrome 7 不支持。Chrome 还会在一行文本的中途分页，使部分文本出现在一个页面上，而部分文本出现在下一个页面上。一反常态地缺乏对细节的关注，但我猜谷歌和苹果都不关心打印的东西。

Firefox 4 还为您的打印添加了一些漂亮的页眉和页脚，包括 url、页面标题、站点标题、页数和时间。好的。

7 回答 7