如何避免在IE11中进行打印预览时出现分页符？

Question

我有下面的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中工作？

Answer 1

这对我有用...“ main”元素中的第一个图形元素是封面。 随后的section和form元素（“ main”的子代）控制在该部分关闭之后的中断。

<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'元素的第一个子元素之前中断。

Answer 2

问题是显示样式。 我不知道为什么它按原样运行，但是我如下修改了css，现在工作正常：

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

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