Question

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

我已经尝试了所有可能描述如何做到这一点的教程，但没有任何作用。这是浏览器支持的问题还是有人真正得到了这个工作，CSS的确切位置如下：

@media print {

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

Answer 1

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）变得古怪。

Answer 2

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

Firefox显然仍然没有。

Answer 3

Firefox does not support this截至2010-11-30，因此不会在Firefox 4中使用。
IE8 does support page-break-inside: avoid - 但是当我在IE9上尝试这个时，它在避免分页时不是很成功（这可能是一个回归，或者IE8也只能在非常简单的情况下避免分页）
AFAIK它在任何webkit浏览器中都不起作用;当然不是铬。
它实际上适用于Opera，即使在真实网站上也是如此。

Answer 4

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

首先，没有必要猜测。只需看看the specification，您就会发现它确实只适用于块级元素。

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

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

Answer 5

Safari 1.3 and later支持page-break-inside。

Answer 6

从初步搜索来看，很难找到有关浏览器支持的最新统计数据，但似乎Firefox 4beta6支持它，而Chrome 7则不支持。 Chrome还会在一行文本中间中断页面，因此部分文本显示在一个页面上，而部分文本显示在下一页上。特别缺乏对细节的关注，但我想谷歌和苹果都不关心打印东西。

Firefox 4还为您的打印添加了一些不错的页眉和页脚，包括网址，页面标题，网站标题，页数和时间。好的。

Answer 7

作为IE渲染（IE8 +）上Eamon Nerbonne's answer的更多信息，您需要确保浏览器处于标准模式。 This article on MSDN显示了必要的内容 - 包括html中的元标记以强制解决问题：

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

感觉很糟糕，但是你有它...似乎更加一致。