如何避免在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;
}
}