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根本不工作

回答

相关问题