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

Question

它是关于打印的，而且仅限于打印。

css:

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

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

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

自己试试，用谷歌浏览器，打开http://fiddle.jshell.net/T4nnG/1/show/ 并尝试打印，看预览，第一页是对的，从第二页开始，大小是对的，但内容不见了

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

它可能只在 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/ - 不工作。而是通过不正确计算内容或布局大小进一步中断。

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

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

所以要回答你的问题，你的 CSS 很好。但是 Chrome 有错误。您只能等待他们修复它。或者修改您生成打印的方式。希望这会有所帮助！

Answer 2

将此添加到您的 CSS：

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

这能解决您的问题吗？