在Chrome中，打印预览与打印仿真不一致

Question

为什么在Chrome（37 Mac OS X）上使用打印预览（cmd + p）与媒体打印模拟器不同？

打印预览：

媒体打印模拟器：

我正在使用Drupal 7，并且我的css配置主题.info打印无论如何都不能覆盖页面上块的宽度：

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css

但其他部分被很好地覆盖。有人知道为什么吗？

- Promo

Answer 1

打印预览会在应用CSS转换之前显示您的页面，因此如果某些元素移动时存在转换，则打印预览将在此转换之前显示它们。 如果您在列，响应式设计，侧滑菜单等方面使用CSS转换，则特别棘手。

因此，在您的打印样式表中修复它，您需要添加以下样式：

@media print {
  *{  transition: none !important }
}

如果以上解决方案对您没有用，那么问题可能是由Chrome引起的。Chrome不会禁用打印媒体的过渡属性。在Chrome DEVTools中，“emulation css media”的“print”选项仅适用于将打印CSS规则应用于页面以进行测试目的，它并不考虑所有其他与打印相关的事情。它显示打印预览，但有时它不会显示实际的打印预览页面。

不同的浏览器在打印页面时表现不同。测试打印的唯一最佳方法是实际打印或打印到PDF文件。

如果您使用的是Bootstrap，则如果您仅使用“col-md-*”或“col-sm-*”，则不起作用，但如果您使用“col-xs-*”，则会起作用，因为问题在于页面本身在像素方面很小，所以Bootstrap认为它需要应用xs样式。

- Haritsinh Gohil