Chrome打印预览不同于在DEVTools

我已经设置了一个打印样式表，并在Firefox中看起来不错。Chrome打印预览不同于在DEVTools

在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"但没有什么变化。

2014-09-24 Keith L.

在您的打印样式表，你需要做的添加如下内容：

*{transition:none!important}

看来，Chrome不禁止过渡性质的打印介质。

Here是我找到答案的地方。

2015-01-19 21:36:28 Ustice

仅适用于媒体打印，我已添加此样式。如果我们共同应用这个CSS，这个工作。如果我们只适用于媒体打印，那么这是行不通的。周围有工作吗？ :-( – 2016-02-05 05:53:28

@JeevaJsb - 我遇到了同样的问题。请参阅我的答案，找出可能的解决方法。 – 2016-09-22 14:02:33

要添加到Ustice的答案和Jeeva Jsb的评论：您可能需要允许DOM在应用transition: none !important规则后重新提交。我做到了这一点通过添加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。）

2016-09-22 14:02:00

我遇到了完全一样的头打破的问题，我已经能够解决它。

在我的情况下，问题是通过使用自定义的@ font-脸我没有在“屏幕” CSS使用“打印” CSS引起的。

它似乎在浏览器DIT无法从打印样式表加载定制的@ font-脸上第预览和渲染网页或多或少空。它会在第二次打印预览中完美呈现。

我的解决办法是加载从品脱CSS也是在屏幕CSS一样的@ font-face规则。这样，当浏览打印预览时，浏览器已经加载了字体，并且它的所有功能都像魅力一样。

2017-01-30 09:43:04

回答