Different Size in CSS @page :first Result Whole @page in Same Size

问题

Its about Print, and Print only.

css:

@page {
    size: A4 portrait;
}
@page :first{
    size: 210mm 1000mm;
}

As CSS defined, should only first page with 1000mm height and rest pages are 297mm (A4) height.

But in Chrome, from second page, looks like 297mm but all content is gone.

Try it yourself, use Google Chrome, open http://fiddle.jshell.net/T4nnG/1/show/ and try print, see the preview, first page is right, and from second page, size is right, but content gone

You can see more clearly by use "save as PDF", but if you choose a real printer, it will shrink first page, the bugs are same

It may only in Chrome, but I am only use the app for Chrome, so as long as it works in Chrome, I am happy.

Am I done something wrong? Please advice on correct CSS, thanks.

回答1:

Verified with a lot of trials, so this is the summary of my trials,

While printing the page, there two things happening - Calculation of layout content and actual rendering of the layout with content

@page :first breaks the first part, calculation of the layout in Chrome. The :first properties are used for calculation for other pages even if there are overrides. But Chrome uses the correct values for pasting content in the wrong layout.

For eg: @page :first if size is x, then then the number of pages is calculated based on x, the amount of content in each page is based on x. When it comes to putting in the content, Chrome realizes there is an override and changes the layout to overridden properties, but does not change the calculation of content or pages. Hence the issue. This is very clear if your case is reversed like so,

@page :first{
    size: A4 portrait;
}
@page{
    size: 210mm 1000mm;
}

You will see that the page heights have been updated but not the content.

Tried with page-break-*, !important rules, but nothing worked.

Tried alternative tools which can be used server side, like

http://www.princexml.com/releases/9.0/ - Not working. Rather breaks further by not calculating content or layout size correctly.

After a bit of searching, found this @page :first { margin: ... } in Chrome bug? Similar to your problem. But unfortunately, same findings here too.

This is a bug in Chrome. Filed a bug report with your case at https://code.google.com/p/chromium/issues/detail?id=355116. Please star it in case you want to follow it.

So to answer your question, your CSS is fine. But Chrome has bugs. You can only wait for them to fix it. Or modify the way you are generating the print. Hope this helps!

回答2:

Add this to your CSS:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Does that fix your issues?

来源：https://stackoverflow.com/questions/22467576/different-size-in-css-page-first-result-whole-page-in-same-size

标签

css

google-chrome

printing

css-paged-media