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

回答