CSS @media print根本不工作

爲什麼@media打印不起作用，我甚至在這個網站上搜索谷歌，也沒有任何幫助，所以我發佈了這個問題。我在谷歌Chrome打印預覽（ctrl p）上測試它，但我也打印到頁面，並保持空白。CSS @media print根本不工作

我試着製作一個單獨的CSS文件，並在頁面中嵌入CSS樣式。

這裏是我的代碼

頁眉

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

HTML

<div id="bruikleenovereenkomst"> 
    <div id="blo_header"> 

    </div> 

    <div id="blo_side_top"></div> 
    <div id="blo_side_bottom"></div> 
</div>

CSS樣式正常

div#bruikleenovereenkomst { 
    width:595px; 
    height:842px; 
    background-color:#fff; 
    position:relative; 
} 

div#blo_header { 
    width:100%; 
    height:125px; 
    background-color:#FBE983; 
    z-index:9 
} 

div#blo_side_top { 
    width:57px; 
    height:420px; 
    background-color:#B6CAE5; 
    position:absolute; 
    right:0; 
    top:0; 
    z-index:99; 
} 

div#blo_side_bottom { 
    width:57px; 
    height:420px; 
    background-image:url(../images/leaflet.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    right:0; 
    bottom:0; 
    z-index:99; 
}

CSS打印樣式（print.css）提示：div #bruikleenovereenkom st只是一個黑色的測試塊。

@media print{ 

    body { 
     margin:0; 
    } 

    h1#logo { 
     display:none; 
    } 

    ul#menu { 
     display:none; 
    } 

    div#bruikleenovereenkomst { 
     width:100%; 
     height:500px; 
     background-color:#000; 
    } 

    div#blo_header { 
     display:none; 
    } 

    div#blo_side_top { 
     display:none; 
    } 

    div#blo_side_bottom { 
     display:none; 
    } 

}

我所得到的只是一個空白頁。

來源

2013-07-30 Julez

也許背景不打印？嘗試將一些真實的內容放在那裏，看看它是否有效。 – adamse

但我需要一個彩色打印頁面....有沒有辦法，我可以給div打印顏色？ – Julez

閱讀stackoverflow上的其他答案似乎這是在瀏覽器中，你不能用css覆蓋的設置。 – adamse

如果您使用@media print，則需要在樣式中添加！important，否則頁面將使用具有更高優先級的元素的內聯樣式。

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

在@media打印，補充！重要的，是一個勝利者

@media print { 
    .myelement1, .myelement2 { display: none !important; } 
}

來源

2015-02-19 00:45:14 Richard

嗯。 '重要的'可能對此有點多，因爲它使風格難以覆蓋。 –

如果！important僅用於@media打印，它不應該影響正常的頁面樣式。這不是優雅的，但如果你有內聯樣式，你需要一種方法來覆蓋它們，因爲它們本身不是很優雅。 – Richard

好吧，我不能不同意內聯樣式，顯然。 –

首先，我會嘗試打印後添加一個空格。可能沒有什麼區別，但.....

@media print { 
    /*print css here*/ 
}

接下來，在瀏覽器中打印通常會忽略背景顏色。嘗試使用「的box-shadow」 ....

@media print { 
    #bruikleenovereenkomst { 
     width: 100%; 
     height: 500px; 
     box-shadow: inset 0 0 0 1000px #000; 
    } 
}

碎雜誌有一些優秀的指針：http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ 注意，他們談論從WebKit瀏覽器打印（Chrome或Safari等），並試圖迫使打印機通過使用單獨的媒體查詢呈現顏色，因爲它們顯示在屏幕上.....

@media print and (color) { 
    * { 
     -webkit-print-color-adjust: exact; 
     print-color-adjust: exact; 
    } 
}

希望這有助於！

來源

2014-04-18 14:04:46 Nostalgia80

正在尋找背景顏色：'），難怪我沒有看到變化。 – edencorbin

CSS @media print根本不工作

回答

相關問題