为什么Chrome打印CSS模拟和打印预览之间存在如此大的差异？

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

我正在尝试使用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模拟与实际打印输出相似？

CSS媒体：模拟中的打印仅用于将打印CSS规则应用于页面，它不考虑与打印相关的所有其他内容

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

---

同样值得注意的是，在打印过程中会出现浏览器差异。

我只想哭：(