Chrome中是否會忽略打印媒體查詢？
[英]Print media queries being ignored in Chrome?
問題描述
我正在使用以下內容創建一些特定於打印的樣式：
@media print {
/* Styles */
}
當我們使用SASS時，所有樣式都會在運行時編譯成一個樣式表styles.css ，它在文檔的<head>中聲明如下：
<link rel='stylesheet' href='/assets/css/styles.css'>
現在當我從chrome（Ctrl + P）打印時，它完全忽略了我的打印樣式，但Firefox（30.0）很好。 IE（11）很糟糕，但這是因為我們有很多IE / IE似乎不喜歡的顯示/隱藏面板/
不能為我的生活弄清楚發生了什么。 如果我在Chrome中模擬打印介質，那么它會很好地加載樣式，當我實際嘗試打印它不起作用時。 我已經嘗試了大量的東西，添加， media=屬性，雙引號，改變href的順序等都無濟於事!!
請注意，我們不再使用type ，因為我認為您不再需要使用它了。 我還是嘗試添加它，但它仍然無法正常工作！
我甚至試過這個： http ： //lawrencenaman.com/optimisation/print-media-queries-not-working/但它仍然不起作用。 它讓我瘋狂，任何想法？
更新：所以我注意到，當我Ctrl + P打印頁面時，我看到的預覽似乎使用了打印樣式表中的一些樣式，但似乎使用移動媒體查詢呈現所有內容？ 我認為可能與斷點有一些沖突，當我有機會時會更新。
UPDATE2：我可以看到打印樣式表正在底部加載所以理論上這應該寫掉所有其他媒體查詢（至少是我試圖寫的那些）？
5 個解決方案
解決方案1
14 2014-07-09 14:12:15
我試着補充一下
@media print {
* {
display:none;
}
}
到我的網站之一的style.css：不起作用。
然后我補充說
<link rel="stylesheet" href="/css/print.css" media="print">
在其他樣式表進入頭部之后，將與上面相同的規則（沒有@media print {}）插入到print.css中。 Chrome現在會解釋規則，並且不會在打印預覽中顯示任何內容。
我假設問題是使用@media print。 但我不知道為什么chrome表現得像那樣。
編輯：通過JavaScript的其他解決方案：
if(/chrome/i.test(navigator.userAgent) {
document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
解決方案2
8 2015-09-28 17:15:01
您可以嘗試將其余的樣式表媒體屬性設置為
media="screen"並將樣式表打印到media="print" 。
這將阻止瀏覽器應用標記為“屏幕”的樣式表中的規則。 為我工作
解決方案3
2 2019-01-02 21:43:08
我也遇到了這個問題，發現這是因為Chrome中的渲染設置。 在測試打印預覽時，我將我的仿真媒體類型設置為“打印”。 當我去實際測試打印時，我將我的媒體模擬設置為“屏幕”。 我應該把它設置為“沒有模仿”。 當它在“屏幕”上時，打印預覽忽略了所有打印介質查詢，仍然將頁面視為屏幕。 當我最終將其設置回“無仿真”時，它開始表現得像你期望的那樣。
解決方案4
1 2017-12-07 21:40:56
我遇到的一個問題是，在print css鏈接中沒有設置rel='stylesheet' 。 添加它修復了問題。
解決方案5
0 2017-08-15 06:58:09
實現這一目標的另一種方法是：打印樣式之前的CSS錯誤。 由於我們似乎都有將印刷樣式放在最后的沖動，因此他們更容易受此影響。 當CSS出錯時它不會抱怨......它只會丟棄樣式表的其余部分。
為打印樣式提供自己的樣式表 - 甚至只是一個單獨的內聯標記 - 可以解決這個問題以及media-spec'd-in-style-tag錯誤。
css 中的媒體查詢被忽略
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.