Google Chrome（v.51）不應用印刷媒體css

我知道有很多這方面的問題，但我嘗試了一切，似乎沒有任何工作。我跟着這些鏈接：Google Chrome（v.51）不應用印刷媒體css

等等。

我嘗試了幾乎所有的建議。

這裏是我到目前爲止有：

HTML

<link href="path/styles/print.css" rel="stylesheet" media="print"> 
<div class="page-break"> 
     //some stuff 
</div>

CSS

@media all { 
    .page-break { display: none; } 
} 

@media print { 
    .page-break { display: block; page-break-before: always;} 
}

在IE和FF，我不能看到的預覽我會打印頁面，但是當我打印時，它工作得很好。在chrome中，我可以看到預覽，但它從來不是正確的......接下來我試圖將它保存爲pdf，但它仍然不適用於打印CSS。

*保存爲PDF作爲無關試圖使其工作... ...它只是爲了節省紙張現在

，您發佈的答案之前，請注意以下事項：

我試試這個：

！important;破解
刪除CSS頁面，直接在HTML頁面中加入CSS
刪除媒體都
刪除所有介質和改變顯示塊無
試圖頁面突破內部：避免;
*：;
。第破{...過渡！：無重要;} {過渡無重要！}
把它放在主樣式表
float：none！重要;
position：relative;位置：靜態;
display：block;顯示：內聯;
box-sizing：content-box;
-webkit-region-break-inside：avoid;

我沒有試過其他版本的Chrome。我嘗試了v.50，多次嘗試失敗後，我更新至v.51。有人說，它在v.38或類似的東西上工作...我不會降級到該版本。

編輯：我忘了提及我的html代碼是在一個jsp頁面。所以<div class="page-break">在for-loop。每個循環都必須位於單個頁面上。

編輯2：我創建了一個jsfiddle。我粘貼了我擁有的源代碼，並且完美地工作。所以我刪除了我的頁面中鏈接的CSS樣式表。但即使這樣做，也不行。所以如果它在某個地方被覆蓋，那就不存在了。

頁面是一個JSP頁面，它有什麼關係嗎？如果不是，我是無能爲力的，因爲在同一個項目中，我想要打印的頁面上，我添加了一個重定向到page.html的按鈕，並且我創建了3個具有相同類名的div，它工作得很好。

來源

2016-06-21 anthomaxcool

這可能不是問題，但也許類名造成一些衝突？它在黑暗中刺傷，但很容易嘗試。 –

@ArathiSreekumar不錯的嘗試，可悲的是它沒有改變一件事！ – anthomaxcool

嘗試添加「float：none」以及CSS類.page-break;嘗試在這基本上的東西：http://stackoverflow.com/questions/4884380/css-page-break-not-working-in-all-browsers –

您是否嘗試將print.css放入主樣式的css文檔中？我有類似的情況，它解決了我的問題。

你不必做一個pdf文件每次看是否@media打印工作，你可以看到頁面仿真就像在你谷歌DEVELOPPEMENT工具打印在Chrome：

要查看該選項，請執行以下操作：F12 - > show console - >呈現（它是控制檯的選項卡） - >選中「模擬媒體打印」。

來源

2016-06-21 14:03:00 Relisora

Thansk快速回答。是的，我忘了提及它，起初它是在我的主style.css中，它不起作用，所以我把它移到另一個css文件中。我也嘗試了複選框，但我不明白在哪裏...是在我看到頁面時，還是在單擊打印並查看預覽時？因爲當我檢查它時，沒有什麼令人耳目一新的東西，它保持不變。 – anthomaxcool

其實我找到了它應該做的事情。但我仍然無法完成工作 – anthomaxcool

所以！我在這裏回答我自己的問題，以防有人不能像我一樣工作。

我試圖給我的問題一個新的方法，因爲我不能打印每頁單個div，我不知道爲什麼，我必須找到另一種方式。但並不是我不知道它是如何工作的......我創建了一個JSFiddle，它工作。在我自己的項目中，我創建了一個html頁面並且工作。但是，因爲我在JSP中，也許它在某處與我的代碼搞混了。我不知道。

所以這就是我所做的。

function getStuffToPrint(data){ 
     var html = "", index, len; 
     for (index = 0, len = data.length; index < len; ++index) { 
      html += "<div class=\"custom-page-break\">" + data[index].innerHTML + "</div>"; 
     } 
     var mywindow = window.open(); 
      mywindow.document.write('<html><head>'); 
      mywindow.document.write('<link href="my/path/to/styles/print.css" rel="stylesheet" type="text/css"/>'); 
      mywindow.document.write('</head><body >'); 
      mywindow.document.write(html); 
      mywindow.document.write('</body></html>'); 

      mywindow.document.close(); 
      mywindow.focus(); 

      mywindow.print(); 
      mywindow.close(); 

      return true; 
    }

在我的情況，data是一個objectHTMLCollection：document.getElementsByClassName("custom-page-break")

這有點棘輪，我不得不寫的div再次與類名...

這裏是我的CSS，它可能沒有display: block和page-break-inside工作，我甚至沒有嘗試。

@media print { 
    .custom-page-break { 
     display: block !important; 
     page-break-before: always !important; 
     page-break-inside: avoid !important; 
    } 
}

希望它能爲一些人節省幾個小時。

來源

2016-06-21 19:16:13 anthomaxcool

Google Chrome（v.51）不應用印刷媒體css

回答

相關問題