为什么 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%;

    }
}

如何使打印 CSS 模拟与实际打印输出相似？

Answer 1

css media: print in emulation 仅用于将打印 css 规则应用到页面，它不考虑与打印一起进行的所有其他事情。

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

另外值得注意的是，打印时浏览器会有差异。

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

Why is there such a discrepancy between Chrome print CSS emulation and Print Preview?

css

printing

google-chrome