How to avoid page break during print preview in IE11?

Question

I have the below html code

<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 class basically adds a page break before as the name specifies.

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

}

Now during the print preview, i get an empty page in the beginning in FF and IE11. I was able to fix this in FF using the below css style

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

}

But it doesnt seem to be working for IE11. There is another reason why i have to use page break before and not after. So that is not an option. Can anyone tell me why and how i can get it to work in IE11?

Answer 1

this works for me... the first figure element in the 'main' element is the cover-page. The subsequent section and form elements (children of the 'main') control breaking after the section closed.

<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>

.... you should not break before the first child of your 'main' element.

Answer 2

The problem was the display style. I dont know why it was acting the way it was but i modified the css as below and now it working fine:

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

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