Firefox prints extra blank page

问题

I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:

It prints just the header on the first page. The rest of it is blank. The actual content is shown only on page 2.

Googling a bit about it i found that the "float: left" style is causing it. If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.

Is there a solution to this problem?

Thanks.

回答1:

Try using a print style sheet:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.

Al

回答2:

Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.

Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.

JAB

回答3:

I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.

回答4:

The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.

To fix, just add a print style setting display: block and min-height: 100%.

回答5:

Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.

Setting the rule to middle as shown fixed it

@media print {
    table tr td {
        vertical-align: middle;
    }
}

回答6:

I have my content in a table and this fixes the problem.

tr { page-break-inside: avoid; }

来源：https://stackoverflow.com/questions/7398436/firefox-prints-extra-blank-page