CSS @media打印根本不起作用 [英] CSS @media print not working at all
问题描述
我一直在苦苦挣扎几个小时,为什么@media打印不起作用,我在Google上甚至在这个网站上搜索都没有任何帮助,所以这就是为什么我发布此问题。
我正在Google chrome打印预览(ctrl p)上对其进行测试,但我也将其打印到页面上,并且保持空白。
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.
我尝试制作
这是我的代码
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
<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#bruikleenovereenkomst只是
CSS print styles (print.css) note: the div#bruikleenovereenkomst is just a black block for testing.
@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;
}
}
我所能得到的只是
推荐答案
如果使用@media print,则需要在样式或页面中添加!important将使用优先级更高的元素的内联样式。
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.
例如
<div class="myelement1" style="display:block;">My div has an inline style.</div>
在@media印刷品中,添加!important并成为赢家
In @media print, add !important and be a winner
@media print {
.myelement1, .myelement2 { display: none !important; }
}
这篇关于CSS @media打印根本不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!