page-break-inside：避免 Firefox 和/或 IE 的等效项答案

【问题标题】：page-break-inside:avoid equivalent for Firefox and/or IEpage-break-inside：避免 Firefox 和/或 IE 的等效项
【发布时间】：2011-03-24 23:51:16
【问题描述】：

我了解 CSS page-break-inside:avoid 指令应该防止在打印 HTML 文档时在 div 中出现分页符。通过搜索互联网，我发现它只支持 Opera 和 IE8。是否有一种解决方法可以让我防止在 Firefox (3.6) 或低于 8 的 IE 版本中分页？

【问题讨论】：

抱歉，没有解决方案，但它在 Mac OS Firefox 3.6.10 中对我有效，但在 Mac OS Opera 10.62 中冻结，在 Safari 中无效。

标签： html css printing printing-web-page

【解决方案1】：

抱歉，我的回答是“不可能”，但如果有人能证明我错了，我会很高兴。

我最近遇到了同样的问题，在做了一些研究后，我决定继续使用

page-break-after: always;

在每几个元素之后。

http://reference.sitepoint.com/css/page-break-inside

http://reference.sitepoint.com/css/page-break-after

【讨论】：

让我补充一点，它似乎还没有在 Firefox 54 中实现

【解决方案2】：

尝试改用white-space:nowrap。这应该阻止文本在元素内部中断，至少在屏幕上时。我不确定它如何转化为印刷媒体，但值得一试。

【讨论】：

【解决方案3】：

对于任何不是 Firefox 的东西，

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

会起作用。但不适用于火狐。在 Firefox 中，您要做的是检查高度，然后在相关时添加 page-break-after: always;。

平均而言，顶部和底部的边距为 1 英寸。所以，为了测量一个 10 英寸的页面会消耗多少像素，我使用了这个：

var pageOfPixels;
(function(){
    var d = document.createElement("div");
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;");
    document.body.appendChild(d);
    pageOfPixels = $(d).height();
    d.parentNode.removeChild(d);
})();

我有很多 div，每个 div 中都有很多段落。所以我所做的就是遍历它们，然后将它们在当前页面上的当前高度与 pageOfPixels 值进行比较。

var currentPosition = 0;
$('.printDiv').each(function (index, element) {
    var h = $(this).height();
    if (currentPosition + h > pageOfPixels) {
        //add page break
        $('.printDiv').eq(index - 1).css("page-break-after", "always");
        currentPosition = h;
    } else {
        currentPosition += h;
    }
});

这在 Firefox 中对我有用。

【讨论】：

【解决方案4】：

如何只匹配元素中的所有元素，除了第一个元素，并且不让它们在之前中断

#yourelement *+*{
    page-break-before: avoid;
}

【讨论】：

问题是询问 FF 和旧 IE 的兼容性，而不是如何使用 css 属性。
请注意，我使用的是 page-break-before，而不是不支持的 page-break-inside，这就是为什么您必须使用这个奇怪的选择器才能获得相同的效果。其次，这篇文章已经快 6 个月了。
这也不适用于 ≤IE7 和 Firefox doesn't support avoid。
...和 avoid still 在 Firefox (45) 中不受支持