我正在使用@media print来设计一些标签。在Chrome 54+升级后,打印似乎是在一个按比例缩小的版本。元件之间的相对尺寸和距离保持相同;然而,当打印时,打印显示为缩小或按比例缩小。在Chrome 53上运行良好。知道为什么会这样吗
@media print
cdmah0mi1#
我遇到这个bug是因为我们的应用程序使用Bootstrap 3框架。我发现(实际上是偶然的),如果你有一个带有引导容器类的DIV来 Package 你的内容(在引导页面中很常见),这个bug就会被触发。一个简单的解决方法是通过在引导CSS之后添加以下CSS样式来强制容器在打印时为100%宽度。
@media print { .container { width: 100% !important; min-width: auto !important; } }
这解决了我们的应用程序中Chrome 54中引入的打印大小问题。我也向Chrome团队报告了这个bug,他们已经承认了。https://bugs.chromium.org/p/chromium/issues/detail?id=660058
htzpubme2#
这不是一个完整的修复,但它让我们运行我们的应用程序。这些是Chrome上的企业用户,打印文档和标签。仅使用浏览器黑客针对Chrome。
// Chrome 54+ specific browser hack for printing // http://browserhacks.com/#hack-ac2480b5c83038f2d838e2a62e28a307 @media print and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { body { zoom: 150%; } }
2条答案
按热度按时间cdmah0mi1#
我遇到这个bug是因为我们的应用程序使用Bootstrap 3框架。我发现(实际上是偶然的),如果你有一个带有引导容器类的DIV来 Package 你的内容(在引导页面中很常见),这个bug就会被触发。一个简单的解决方法是通过在引导CSS之后添加以下CSS样式来强制容器在打印时为100%宽度。
这解决了我们的应用程序中Chrome 54中引入的打印大小问题。
我也向Chrome团队报告了这个bug,他们已经承认了。https://bugs.chromium.org/p/chromium/issues/detail?id=660058
htzpubme2#
这不是一个完整的修复,但它让我们运行我们的应用程序。这些是Chrome上的企业用户,打印文档和标签。
仅使用浏览器黑客针对Chrome。