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

值得注意的是,打印机中存在浏览器差异.