打印预览与Chrome中的打印模拟不同

Question

为什么打印预览（cmd + p）与Chrome（37 Mac OS X）上的控制台的媒体打印模拟不同？

打印预览 ：

媒体印刷品：

我正在使用Drupal 7和我的css配置theme.info打印不会覆盖页面上的块宽度但是我设置：

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

但是其他部分被完全覆盖了。有人知道为什么吗？

Answer 1

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

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

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

如果以上解决方案对您不起作用，那么它的原因可能是chrome，Chrome不会禁用打印介质的过渡属性。在Chrome DEVTools print中的emulation css media选项仅用于将打印css规则应用于页面，出于测试目的，它不考虑打印所带来的所有其他内容，它显示打印预览但有时它不显示打印页面作为实际打印预览。

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

如果你使用bootstrap然后如果你只使用col-md-*或col-sm-*它将无法工作，但如果你使用col-xs-*然后它将工作，因为问题是页面本身在像素方面很小，所以bootstrap认为它需要应用xs风格。