打印预览与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 过渡，这一点尤其棘手。

\n\n

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

\n\n

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

\n\n

如果上述解决方案对您不起作用，那么原因可能是 Chrome，Chrome 不会禁用打印媒体的过渡属性。\nin Chrome DEVToolsprint选项emulation css media 仅用于将打印 css 规则应用于页面，出于测试目的，它不考虑与打印相关的所有其他内容，它显示打印预览，但有时不会将打印页面显示为实际的打印预览。

\n\n

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

\n\n

如果您正在使用 bootstrap 那么如果您仅使用col-md-*否则col-sm-*它将无法工作，但是如果您使用col-xs-*那么它会工作，因为问题是页面本身就像素而言很小，所以 bootstrap 认为它需要应用 xs 样式。

\n