2

它关于打印，仅打印。

CSS：

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

正如 CSS 定义的那样，应该只有第一页高度为 1000 毫米，其余页面为 297 毫米（A4）高度。

但是在 Chrome 中，从第二页开始，看起来像 297 毫米，但所有内容都消失了。

自己试试，用谷歌浏览器，打开http://fiddle.jshell.net/T4nnG/1/show/ 试试打印，看预览，第一页是对的，从第二页开始，大小是对的，但是内容没了

使用“另存为PDF”可以看的更清楚，但是如果你选择真打印机，第一页会缩小，bug是一样的

它可能只在 Chrome 中，但我只使用 Chrome 的应用程序，所以只要它在 Chrome 中工作，我很高兴。

我做错了什么吗？请就正确的 CSS 提出建议，谢谢。

4

2 回答 2

4

经过大量试验验证，所以这是我试验的总结，

在打印页面时，发生了两件事 - 布局内容的计算和布局的实际呈现内容

@page :first 打破第一部分，在 Chrome 中计算布局。即使有覆盖，这些:first属性也用于计算其他页面。但是 Chrome 使用正确的值将内容粘贴到错误的布局中。

例如：@page :首先如果size为x，则以x为基础计算页数，每页的内容量以x为基础。在放入内容时，Chrome 会意识到存在覆盖并将布局更改为覆盖的属性，但不会更改内容或页面的计算。因此问题。如果您的情况如此颠倒，这一点非常清楚，

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

您将看到页面高度已更新，但内容未更新。

尝试使用page-break-*,!important规则，但没有任何效果。

尝试了可用于服务器端的替代工具，例如

http://www.princexml.com/releases/9.0/ - 不工作。而是通过不正确计算内容或布局大小来进一步突破。

经过一番搜索，在 Chrome 错误中找到了这个 @page :first { margin: ... }？类似于你的问题。但不幸的是，这里也有同样的发现。

这是 Chrome 中的一个错误。在https://code.google.com/p/chromium/issues/detail?id=355116上提交了关于您的案例的错误报告。如果您想关注它，请加注星标。

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

于 2014-03-23T20:22:01.677 回答
1

将此添加到您的 CSS 中：

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

这能解决你的问题吗？

于 2014-03-22T16:12:25.320 回答