Question

我已经设置了一个打印样式表，在Firefox中看起来很好。

在Chrome中，整个页面在打印预览（CTRL + P）中断开，但是如果我打开Chrome DEVTools（F12）并使用emulate CSS media功能，页面看起来是正确的 - 就像在Firefox中一样。

奇怪的是，如果我再次打开打印预览，在我激活模拟选项一次后，页面在打印预览中看起来正确！即使我只是激活然后取消激活模拟选项，打印预览总是正确的！

我的print.css以

开头

@media print { ... }

并且包含在页面<head>中，如下所示：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

我尝试删除media="print"，但没有任何变化。

Answer 1

在您的打印样式表中，您需要添加以下内容：

* {
    transition: none !important;
}

Chrome似乎不会禁用打印介质的过渡属性。

Here是我找到答案的地方。

Answer 2

如果您没有找到给出答案的解决方案，那么我有话要说：

print中Chrome DEVTools emulation css media选项中的

仅用于将打印CSS规则应用于页面，出于测试目的，它不考虑打印所伴随的所有其他事情，它会显示打印预览，但有时它不将打印页面显示为实际的打印预览。

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

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

Answer 3

我遇到了完全相同的突破问题，我已经能够修复它了。

在我的情况下，问题是由于使用自定义的@ font-face为'print'CSCS引起的，我没有在'screen'CSS中使用。

浏览器似乎没有从第一次预览的打印样式表加载自定义@ font-face，并且页面呈现或多或少为空。它将在第二次打印预览中完美呈现。

我的解决方案是在屏幕css中也从pint css加载相同的@ font-face规则。这样，浏览器在查看打印预览时已经加载了字体，它就像魅力一样。

Answer 4

要添加到Ustice的回答和Jeeva Jsb的评论：在应用transition: none !important规则后，您可能需要允许DOM重新呈现。我通过在编程打印页面之前向主体添加print CSS类来完成此操作：

CSS：

body.print * {
  transition: none !important;  
}

JS（使用jQuery）：

$('body').addClass('print');
setTimeout(function() {
  window.print();
}, 0);

用户打印完页面后，不要忘记删除print课程。（见how to detect window.print() finish。）