@page:Chrome中的第一个{margin:...}错误?

Jas*_*ban 12 css printing google-chrome

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

@page {
    margin: 1in;
}

@page :first {
    margin: 2in 1in 3in 3in;
}
Run Code Online (Sandbox Code Playgroud)

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

相反,我在Chrome的打印预览中得到以下内容(准确到打印输出).保证金对非第一页不同,但它们都是不正确的.注释掉:first margin规则允许非首页以正确的布局打印,但当然,第一页也会受到影响.

在我看来,Mozilla的文档声称Chrome正确支持这一点.显然Chrome会做出反应,但不正确.如果可以的话,我会参考Chrome文档,但谷歌很糟糕的文档!(有没有谷歌相当于MDN?我找不到它.)

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

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

在此输入图像描述

JSu*_*uar 9

你说:

在我看来,Mozilla的文档声称Chrome正确支持这一点.

没错,但:firstCSS伪类显示从Chrome中未知的支持("未知的支持.请更新这一点."

另外,还有一些与Chrome的许多打印预览问题,我遇到一些听起来类似这样的问题跌跌撞撞像这样的.尽管如此,我找不到任何解决方法.就这样你在自己的测试中意识到我试过了:

  • 负利润
  • 填充而不是边距
  • 大边框来模拟边距
  • 强制分页(可能的黑客解决方案)
  • 明确的widthheight
  • !important

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

更新

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

我的发现与伪类页面上的浏览器兼容性图表:first一致.也就是说,Chrome的未知兼容性以及Firefox的"不支持"兼容性.我无法测试IE8,但我对IE9的测试不支持图表的声明.甚至微软的例子都无法正确呈现(CSS操作方法:使用CSS优化打印页面).

:第一个浏览器兼容性

经过更多的测试,我只能得出结论,@page还没有完全集成到大多数浏览器中.规范是存在的(CSS3有新的规格),但根据我们的测试,文章中缺少经过测试的示例,并且错误报告看起来您将无法成功使用更灵活的@page样式规范.