css - @page :first { margin: . .. } 在 Chrome 错误中？

Question

引用完整 fiddle :http://jsfiddle.net/XT92a/

@page {
    margin: 1in;
}

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

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

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

Mozilla's documentation在我看来，Chrome 可以正确支持这一点。显然 Chrome 有反应，但不正确。如果可以的话，我会引用 Chrome 文档，但谷歌在文档方面很烂! (是否有与 MDN 等效的谷歌？我找不到。)

令我感到奇怪的是，如果 Chrome 从 2.0 版开始就应该支持这个问题，而且打印布局是如此巨大的 PITA，我在其他地方找不到提到这个问题的地方。

我做错了吗？有可靠的解决方法吗？我试过 @page:first(无空格)，独立设置 trbl 样式和单独的边距值，并交换样式声明中规则的顺序。没有影响。

Answer 1

你说:

Mozilla's documentation seems to me to claim that Chrome supports this properly.

是的，但是 the :first CSS pseudo-class显示来自 Chrome 的未知支持(“未知支持。请更新此信息。”

Also, there are many print preview issues with Chrome我偶然发现了一些听起来与这个问题相似的问题 such as this one .尽管如此，我找不到解决方法。只是为了让您在自己的测试中知道我尝试过:

• 负边距
• 填充而不是边距
• 模拟边距的大边框
• > forced page breaks (可能的黑客解决方案)
• 显式宽度和高度
• !重要

我进行了大量测试，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 的测试不支持图表的声明。甚至 Microsoft 的示例也无法正确呈现 (CSS How-to: Optimize Pages for Printing Using CSS)。

经过更多测试，我只能得出结论，@page 尚未完全集成到大多数浏览器中。规范存在 (there are new specs. for CSS3)，但根据我们的测试、文章中缺少经过测试的示例以及错误报告，您似乎无法成功使用 @page 的更灵活的规范 样式。