@page：Chrome中的第一个{margin：...}错误？

Question

参考完整的小提琴：http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}

我希望上面的规则可以使第一个打印页面具有一定的边距，而所有其他页面都有1英寸的边距。

相反，我在Chrome的打印预览中获得以下内容（准确到打印输出）。非首页上的边距 不同，但它们不正确。注释掉:first margin规则允许使用正确的布局打印非首页，但当然，第一页也会受到影响。

在我看来，{p> Mozilla's documentation声称Chrome正确支持此功能。显然Chrome会做出反应，但不正确。如果可以的话，我会参考Chrome文档，但谷歌很糟糕的文档！ （是否有谷歌相当于MDN？我找不到它。）

对我来说很奇怪，我在其他地方找不到这个问题，如果Chrome应该从2.0版本开始支持这个问题，并且打印布局是如此庞大的PITA。

我做错了吗？有一个强大的解决方法吗？我试过@page:first（没有空格），单独设置边距值trbl样式和单独设置，并在样式声明中交换规则的顺序。没效果。

Answer 1

你说：

  

Mozilla的文档在我看来声称Chrome支持这一点   正常。

是的，但the :first CSS pseudo-class显示Chrome的未知支持（“未知支持。请更新此内容。”

Also, there are many print preview issues with Chrome我偶然发现了一些与此问题类似的问题such as this one。尽管如此，我找不到任何解决方法。只是因为你在自己的测试中意识到我试过了：

• 负利润
• 填充而不是边距
• 用于模拟边距的大边框
• forced page breaks（可能的黑客解决方案）
• 明确width和height
• !important

我执行了大量测试， Chrome在生成预览PDF文件时似乎忽略或不正确地实施CSS规则。就个人而言，根据我的测试结果，我认为这是一个错误。

<强>更新

• Firefox v17.0.1 - 根本不适用@page规则。
• Chrome 23.0.1271.97 m - 错误地在所有网页上应用:first伪类。
• IE 9.0.8112.16421 - 执行与Chrome相同的规则误用

我的发现恰逢browser compatibility chart on the :first pseudo class page。也就是说，Chrome的未知兼容性以及Firefox的“不支持”兼容性。我无法测试IE8，但我对IE9的测试不支持图表的声明。甚至微软的例子都无法正确呈现（CSS How-to: Optimize Pages for Printing Using CSS）。

经过更多测试后，我只能得出结论：@page尚未完全集成到大多数浏览器中。规范存在（there are new specs. for CSS3）但是根据我们的测试，文章中缺少经过测试的示例，并且错误报告看起来您将无法成功使用{{1的更灵活的规范造型。

Answer 2

解决方案在我的案例中起作用，并使所有页面的所有页边距相似。之前，第一页用于提供更大的保证金。 而不是使用margin-top：20px使用padding-top：20px在块中首先在页面div中。这可能是

使用：

a.assign(number2=a.number).groupby('number2').agg(lambda x : ';'.join(x.astype(str)))
Out[238]: 
               A number
number2                
2        abc;def    2;2
3            ghi      3

不工作（在首页上给出较大的上边距）：

header {
    margin:0px 80px 20px 80px;
    padding-top:50px;
}