为什么 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。

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