为什么Chrome打印CSS模拟和打印预览之间存在这种差异？

Question

我有一个基于Bootstrap 3的站点。打印出某些页面对我们的客户很重要。除模态对话框外，大多数网站都可以接受。

我尝试使用Chrome（v42.0.2311.135 m）CSS打印仿真来改进打印样式表。但是，它看起来不像打印预览，或者实际上是打印机的内容。

我希望模态的打印版本能够覆盖整个屏幕。这就是我到目前为止所拥有的：

屏幕：

打印CSS模拟（看起来不错，模态占据整个屏幕）：

打印预览/实际硬拷贝（完全错误 - 模态很小，我可以看到页面的其余部分）：

以下是我的打印样式表的相关位：

@media print {
    * {
        -moz-transition: none !important;
        -o-transition: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }

    .modal-backdrop {
        background-color: white!important;
    }

    .modal.center .modal-dialog {
        width: 100%;
        max-width: 100%;
        height: 90%;

    }
}

如何让Print CSS仿真与实际打印输出相似？

Answer 1

css媒体：仿真中的打印仅用于将打印css规则应用于页面，它不会考虑打印所带来的所有其他内容。

例如，默认情况下不会打印图像和背景颜色（这就是主要内容显示的原因，即不应用bg-color：white）。其他事情可能是问题，如绝对定位。 测试打印的唯一可靠方法是实际打印，或者至少打印到pdf。

值得注意的是，打印时会出现浏览器差异。