css - CSS @page :first Result Whole @page in Same Size 中的不同大小

Question

它是关于打印的，而且只是打印。

CSS:

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

按照 CSS 的定义，第一页的高度应为 1000 毫米，其余页面的高度应为 297 毫米 (A4)。

但在 Chrome 中，从第二页开始，看起来像 297mm，但所有内容都消失了。

自己试一下，使用谷歌浏览器，打开http://fiddle.jshell.net/T4nnG/1/show/然后尝试打印，看预览，第一页是正确的，从第二页开始，尺寸是正确的，但内容不见了

使用“另存为PDF”可以看得更清楚，但如果你选择真正的打印机，它会缩小第一页，错误是一样的

它可能只在 Chrome 中，但我只使用 Chrome 的应用程序，所以只要它在 Chrome 中工作，我就很高兴。

我做错了什么吗？请建议正确的 CSS，谢谢。

Answer 1

通过大量试验验证，所以这是我试验的总结，

在打印页面时，会发生两件事 - 布局内容的计算和包含内容的布局的实际呈现

@page :首先打破第一部分，在 Chrome 中计算布局。 :first 属性用于计算其他页面，即使有覆盖也是如此。但是 Chrome 使用正确的值以错误的布局粘贴内容。

例如:@page :first if size is x, then pages number of pages are calculated based on x, page of content in the amount is based on x.在放入内容时，Chrome 意识到存在覆盖并将布局更改为覆盖的属性，但不会更改内容或页面的计算。因此问题。如果你的情况是这样逆转的，这很清楚，

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

您会看到页面高度已更新，但内容未更新。

尝试使用 page-break-*、!important 规则，但没有任何效果。

尝试了可以​​在服务器端使用的替代工具，例如

http://www.princexml.com/releases/9.0/ - 不工作。而是通过不正确计算内容或布局大小而进一步中断。

经过一番搜索，找到了这个 @page :first { margin: ... } in Chrome bug?类似于你的问题。但不幸的是，这里也有同样的发现。

这是 Chrome 中的错误。在 https://code.google.com/p/chromium/issues/detail?id=355116 提交了关于您案例的错误报告.如果您想关注它，请给它加注星标。

所以要回答您的问题，您的 CSS 没问题。但是 Chrome 有错误。只能等他们修好了。或者修改生成打印件的方式。希望这对您有所帮助!