CSS 中打印的媒体查询打印 Chrome 54+ 中的缩小版

Question

我用来@media print设计一些标签。Chrome 54+ 升级后，打印似乎是按比例缩小的版本。元素之间的相对大小和距离保持不变；但是，打印时打印内容会显得缩小或缩小。在 Chrome 53 上运行良好。知道为什么会发生这种情况吗？

Answer 1

我遇到这个错误是因为我们的应用程序使用 Bootstrap 3 框架。我发现（实际上是偶然的），如果您有一个带有引导容器类的 DIV 来包装您的内容（对于 Bootstrap 页面很常见），则会触发此错误。一个简单的解决方法是在引导 CSS 后添加以下 CSS 样式，强制容器在打印时为 100% 宽度。

@media print {
   .container {
      width: 100% !important;
      min-width: auto !important;
   }

}

这解决了我们应用程序中 Chrome 54 中引入的打印尺寸问题。

我还向 Chrome 团队报告了这个错误，他们已经承认了这一点... https://bugs.chromium.org/p/chromium/issues/detail?id=660058