CSS @page中的大小不同:第一个结果整个@page的大小相同 [英] 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;
}

根据CSS的定义，仅第一页的高度应为1000mm，其余页面的高度应为297mm(A4).

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

但是在Chrome浏览器中，从第二页开始看起来是297mm，但是所有内容都消失了.

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

尝试一下，使用Google Chrome，打开 http://fiddle.jshell.net/T4nnG/1/show/ 并尝试打印，查看预览，第一页是正确的，第二页中的大小是正确的，但是内容消失了

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

通过使用另存为PDF"可以更清楚地看到，但是如果选择真正的打印机，它将缩小第一页，其错误是相同的.

它可能仅在Chrome中使用，但我仅在Chrome中使用该应用程序，因此只要它在Chrome中可用，我都会感到高兴.

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.

我做错了吗?请提供有关正确CSS的建议，谢谢.

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

推荐答案

经过大量试验验证，这是我的试验摘要，

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:首先中断第一部分，即计算Chrome中的布局. :first属性用于其他页面的计算，即使有覆盖也是如此.但是Chrome使用正确的值将内容粘贴到错误的布局中.

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

例如:@page:首先，如果大小为x，则基于x计算页面数，每页中的内容量基于x.在放置内容时，Chrome会意识到存在替代，并将布局更改为替代属性，但不会更改内容或页面的计算.因此，问题.如果您的案子像这样逆转，这非常清楚，

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.

尝试了page-break-*，!important规则，但无济于事.

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/-不在职的.宁可因无法正确计算内容或布局尺寸而进一步中断.

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

经过一番搜索，找到了这个 @page:first {margin:.. .}中存在Chrome错误?类似于您的问题.但不幸的是，这里也有同样的发现.

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

这是Chrome中的错误.在 https://code.google上提交了有关您的案例的错误报告. com/p/chromium/issues/detail?id = 355116 .请加注星标，以备您关注.

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.

因此，回答您的问题，您的CSS很好.但是Chrome有bug.您只能等待他们修复它.或修改生成打印的方式.希望这会有所帮助！

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!

这篇关于CSS @page中的大小不同:第一个结果整个@page的大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！