Html CSS @media 打印根本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17942969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS @media print not working at all
提问by Julez
I'm struggling for hours now why the @media print is not working, I search on Google even on this site and nothing helped, so that's why I post this question. I'm testing it on Google chrome print preview (ctrl p) but i also printed to page and it stays blank.
我现在挣扎了几个小时，为什么@media 打印不起作用，我什至在这个网站上搜索了谷歌，但没有任何帮助，所以这就是我发布这个问题的原因。我正在 Google chrome 打印预览 (ctrl p) 上测试它，但我也打印到页面并且它保持空白。
I try'd to make a separate css file and also a embedded css style into the page.
我尝试在页面中制作一个单独的 css 文件和嵌入的 css 样式。
Here is my code
这是我的代码
Headers
标题
<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
HTML
<div id="bruikleenovereenkomst">
<div id="blo_header">
</div>
<div id="blo_side_top"></div>
<div id="blo_side_bottom"></div>
</div>
CSS normal styles
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 styles (print.css) note: the div#bruikleenovereenkomst is just a black block for testing.
CSS 打印样式 (print.css) 注意：div#bruikleenovereenkomst 只是一个用于测试的黑块。
@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;
}
}
All I get with printing is just a blank page.
我打印出来的只是一张空白页。
回答by Richard
If you are using @media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.
如果使用@media 打印，则需要在样式中添加 !important ，否则页面将使用具有更高优先级的元素的内联样式。
E.g.
例如
<div class="myelement1" style="display:block;">My div has an inline style.</div>
In @media print, add !important and be a winner
在@media print 中，添加 !important 并成为赢家
@media print {
.myelement1, .myelement2 { display: none !important; }
}
回答by Nostalgia80
First, I'd try adding a space after print. May not make a difference, but.....
首先，我会尝试在打印后添加一个空格。可能不会有什么不同，但是......
@media print {
/*print css here*/
}
Next, printing in browsers usually ignores background colors. Try using 'box-shadow'....
其次，在浏览器中打印通常会忽略背景颜色。尝试使用'box-shadow'....
@media print {
#bruikleenovereenkomst {
width: 100%;
height: 500px;
box-shadow: inset 0 0 0 1000px #000;
}
}
Smashing Magazine has some excellent pointers: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/Note that they talk about printing from a Webkit browser (Chrome or Safari, for example), and attempting to force the printer to render the colors as they appear on-screen by using a separate media query.....
Smashing Magazine 有一些很好的指导：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;
}
}
Hope this helps!
希望这可以帮助！
回答by Ujjwal Singh
window.print()is an async function, and therefor if you are managing the DOM right after calling it - you may run into such blank print issues. The solution is to move the DOM management to event callback functions for the beforeprintand afterprintevents:
window.print()是一个异步函数，因此如果您在调用它后立即管理 DOM - 您可能会遇到此类空白打印问题。解决方案是将 DOM 管理移至beforeprint和afterprint事件的事件回调函数：
Note:register both these callbacks beforecalling the window.printfunction
注意：在调用window.print函数之前注册这两个回调
Safari browser does not support these two events.
Safari 浏览器不支持这两个事件。
