Question

关于打印和仅打印。

的CSS：

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

如CSS定义的那样，只有1000mm高度的第一页和其余页面的高度为297mm（A4）。

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

亲自试用，使用谷歌浏览器，打开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/ - 不行。而是通过不正确计算内容或布局大小而进一步突破。

经过一番搜索后，发现此@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;
    }
}

这会解决您的问题吗？