CSS @page 中的不同大小：第一个结果整个@page 大小相同

Question

它与打印有关，并且仅与打印有关。

CSS：

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

根据 CSS 的定义，只有首页高度为 1000 毫米，其余页面高度为 297 毫米 (A4)。

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

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

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

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

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

Answer 1

经过大量试验验证，这是我的试验总结，

打印页面时，会发生两件事 - 布局内容的计算和布局与内容的实际渲染

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

例如： @page ：首先如果size为x，则根据x计算页数，每页的内容量根据x计算。当涉及到放入内容时，Chrome 意识到存在覆盖并将布局更改为覆盖属性，但不会更改内容或页面的计算。因此出现了这个问题。如果你的情况像这样颠倒过来，这一点就很清楚了，

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

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

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

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

http://www.princexml.com/releases/9.0/ - 不工作。相反，由于未正确计算内容或布局大小而进一步破坏。

经过一番搜索，在 Chrome 中发现了这个 @page :first { margin: ... } 错误？和你的问题类似。但不幸的是，这里也有同样的发现。

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

所以回答你的问题，你的 CSS 没问题。但 Chrome 存在缺陷。你只能等待他们修复它。或者修改生成打印的方式。希望这可以帮助！