不同尺寸的CSS @page：在相同大小第一个结果全@page(Different Size in

它大约只有打印和打印。

CSS：

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

由于定义的CSS，只能与千毫米高度的第一页和休息页面297毫米（A4）的高度。

但在Chrome中，从第二页，看起来像297毫米但所有的内容了。

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

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

它可能只在Chrome，但我只用了镀铬的应用程序，所以只要它的作品在Chrome中，我很高兴。

我是不是做错了什么？请正确的CSS的意见，谢谢。

Answer 1:

验证了很多试验，所以这是我试验的总结，

虽然打印页，有两件事情发生 - 布局含量的计算和实际呈现的内容布局

@page：第一中断的第一部分，在镀铬的布局的计算。的:first属性用于计算即使有替代其他页面。但Chrome使用了正确的值在错误的布局粘贴内容。

为例如：@page：第一，如果尺寸为x，那么然后页数是基于x计算，在每个页面内容量基于x。当谈到投入的内容，Chrome的实现有一个超越并改变布局覆盖性能，但不会改变的内容或页面计算。因此这个问题。这是很清楚的，如果你的情况是相反的，像这样，

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

你会看到页面的高度已经被更新，但不是内容。

与试图page-break-* ， !important规则，但毫无效果。

尝试可以使用的服务器侧的替代工具，如

http://www.princexml.com/releases/9.0/ -不工作。而是由无法正确计算内容或布局规模进一步突破。

有点搜索后，发现这个@page：第一{保证金：...}在Chrome中的错误？类似于您的问题。但不幸的是，同样的结果也在这里。

这是浏览器的错误。提起bug报告你的情况下，在https://code.google.com/p/chromium/issues/detail?id=355116 。请你想追踪这个情况加上星号。

因此，要回答你的问题，你的CSS是罚款。而Chrome有错误。你只能等待他们来修复它。或修改您所生成打印的方式。希望这可以帮助！

添加到您的CSS：

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

这是否解决您的问题是什么？

文章来源: Different Size in CSS @page :first Result Whole @page in Same Size