打印预览与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不会禁用打印介质的过渡属性。 print中的Chrome DEVTools emulation css media中的选项仅用于将打印CSS规则应用于页面，出于测试目的，它不考虑打印所伴随的所有其他事情，它显示打印预览但有时它不会将打印页面显示为实际的打印预览。

不同的浏览器在打印页面时的行为也有所不同。唯一的最佳测试打印方式是通过实际打印或打印为pdf。

如果您使用的是引导程序，则如果仅使用col-md-*或col-sm-*，它将无法正常工作；但是，如果您使用的是col-xs-*，则它将正常工作，因为问题在于页面本身就像素而言很小，因此bootstrap认为它需要应用xs样式。