當我嘗試在Chrome或Firefox中打印網頁時，爲什麼我的樣式被刪除？

我無法弄清爲什麼當我嘗試打印我的網頁時，我的按鈕樣式/顏色被刪除。我爲我的一些樣式使用引導程序。當我嘗試在Chrome或Firefox中打印網頁時，爲什麼我的樣式被刪除？

.button.primary { 
    font-size: 15px; 
    font-size: 1.5rem; 
    line-height: 18px; 
    line-height: 1.8rem; 
    background-color: #EEB111; 
    color: #FFF; 
    font-weight: 600; 
    text-decoration: none; 
    outline: 0; 
}

來源

2016-12-14 Fawn

它是打印機上的默認設置（bg-colors/bg-image）不打印......以備我猜。只有用戶可以改變這一點，樣式表沒有硬件上的動力:(:) –

@Gyryrillus - 如果你注意到在上面的屏幕截圖中選擇了這些選項......所以我不知道爲什麼它仍然會去除顏色？ – Fawn

哦，是的，然後檢查'@media print'規則並刪除bg被重置的/註釋行。否則'@media只是屏幕'，可能涉及，刪除'只''將所有樣式應用於'all'（包括'print'） –

它與引導做。如果你的引導程序includes print media styles，因爲它可能不是customized它排除它們，一些樣式會改變。

（Hintergrundgrafiken =背景圖形）

此外，這是重要的，因爲你已經在你的屏幕截圖做正確：
要打印顏色和材料，例如頁面在Firefox中，您必須點擊File > Page Setup... > Print background或Print (icon in the top right menu) > Page Setup... > Print background來告訴瀏覽器。

來源

2016-12-14 20:37:52 Marvin

我選擇了打印背景，圖像和顏色，它仍然顯示如上面的屏幕截圖:(如果你注意到在上面的屏幕截圖中選擇了這些選項 – Fawn

已更新我的答案。似乎問題出現在bootstrap媒體樣式中。一個最小的本地示例，帶有boostrap和一個自定義的boostrap（不包括「打印介質樣式」），並且它只適用於我自定義的版本 – Marvin

這解決了我的問題，當我註釋掉引導打印樣式時，謝謝！ – Fawn

您是否使用@media print用於例如打印這些風格

@media print { 
    body { font-size: 10pt } 
}

如果沒有然後按照這裏

希望這會以某種方式幫助你（y）。

來源

2016-12-14 20:12:56 pradeep1991singh

我正在使用打印樣式，但我沒有將每個按鈕樣式，鏈接樣式，圖像樣式等添加到正常styles.css樣式表中的打印樣式表。我是否必須再次定義每個樣式並將其複製到我的打印樣式表中？ – Fawn

我只是嘗試將我的按鈕樣式添加到我的print.css樣式表中，但它仍然不適用於我。我不確定這裏發生了什麼事。 – Fawn

它正在被刪除，因爲CSS樣式表的屬性被稱爲media它定義了這個CSS文件將在哪個媒體上工作。

嘗試把這個樣式表media="all"或媒體=「打印」

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

來源

2016-12-14 20:15:04

你試過這個嗎？它不適合我。 – Marvin

您需要在所有包含在html頁面中的css文件中寫入media =「all」。它確實有效。 –

嘿瑪文是否適合你？ –

當我嘗試在Chrome或Firefox中打印網頁時，爲什麼我的樣式被刪除？

回答

相關問題