css - 为什么 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 media: print 仅用于将打印 css 规则应用到页面，它不考虑与打印一起出现的所有其他内容。

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

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