IE11打印预览时如何避免分页？答案

【问题标题】：How to avoid page break during print preview in IE11?IE11打印预览时如何避免分页？
【发布时间】：2018-07-03 11:09:55
【问题描述】：

我有下面的html代码

<div id="allPages"><div class="wrapper chromefix pagebreakbefore">
        <!-- the rows of a grid need to be contained with a div marked with the 'grid' class; I set the height of this div just to simulate space-->
        <div class="row">
            <!-- row of th grid-->
            <div class="col p-25 al">
                <div style="width: 160px; height: 50px;">.....

Pagebreakbefore 类基本上在名称指定之前添加了一个分页符。

.pagebreakbefore {
page-break-before: always;
-webkit-break-before: always;
break-before: always;

}

现在在打印预览期间，我在 FF 和 IE11 的开头得到一个空白页。我可以使用下面的 css 样式在 FF 中解决这个问题

@media print{
.pagebreakbefore:first-child { display: block; page-break-before: avoid; }
.pagebreakbefore { display: block; page-break-before: always; }

}

但它似乎不适用于 IE11。我必须在之前而不是之后使用分页符还有另一个原因。所以这不是一个选择。谁能告诉我为什么以及如何让它在 IE11 中工作？

【问题讨论】：

标签： html css internet-explorer web internet-explorer-11

【解决方案1】：

这对我有用...“主要”元素中的第一个图形元素是封面。后续部分和表单元素（“主”的子元素）控制在部分关闭后中断。

<style media="print">
figure[role=heading],*[role=main] section,form{display:block!important;visibility:visible!important;height:auto; page-break-after:always;-webkit-break-after: always;break-after:always }
*[role=main] section,form{ page-break-before:always;-webkit-break-before: always;break-before:always }
</style>

....你不应该在'main'元素的第一个子元素之前中断。

【讨论】：

【解决方案2】：

问题在于显示样式。我不知道它为什么会这样，但我修改了css如下，现在它工作正常：

@media print {
.pagebreakbefore:first-child {
    display: inline !important;
    page-break-before: avoid !important;
}

.pagebreakbefore {
    page-break-before: always !important;
}
}

【讨论】：