15

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

@page {
    margin: 1in;
}

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

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

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

在我看来， Mozilla 的文档声称 Chrome 正确支持这一点。显然 Chrome 会做出反应，但不正确。如果可以的话，我会参考 Chrome 文档，但谷歌的文档很烂！（有没有相当于MDN的谷歌？我找不到。）

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

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

在此处输入图像描述

4

2 回答 2

11

你说：

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

是的:first，但CSS 伪类显示来自 Chrome 的未知支持（“未知支持。请更新。”

此外，Chrome 存在许多打印预览问题，我偶然发现了一些听起来与此问题相似的问题，例如 this one。尽管如此，我找不到解决方法。只是为了让您在自己的测试中知道我尝试过：

  • 负边距
  • 填充而不是边距
  • 大边框模拟边距
  • 强制分页符（可能的破解解决方案）
  • 明确width和height
  • !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 的测试不支持图表的主张。甚至 Microsoft 的示例也无法正确呈现（CSS How-to: Optimize Pages for Printing Using CSS）。

:first 浏览器兼容性

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

于 2012-12-23T03:48:32.160 回答
0

在我的情况下有效的解决方案，使所有页面的所有边距都相似。以前，第一页用于提供更大的边距。而不是使用 margin-top:20px 在页面 div 中首先出现的块中使用 padding-top:20px 。这可能是

作品：

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

不工作（在第一页上提供更大的上边距）：

header {
    margin:50px 80px 20px 80px;
}
于 2018-01-08T23:17:16.860 回答