我现在已经苦苦挣扎了几个小时,为什么@media print 不起作用,我什至在这个网站上用谷歌搜索,但没有任何帮助,所以这就是我发布这个问题的原因。 我正在 Google chrome 打印预览 (ctrl p) 上测试它,但我也打印到页面上,它仍然是空白的。
我试着制作一个单独的 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#bruikleenovereenkomst 只是一个用于测试的黑色 block 。
@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,否则页面将使用具有更高优先级的元素的内联样式。
例如
<div class="myelement1" style="display:block;">My div has an inline style.</div>
在@media print 中,添加 !important 并成为赢家
@media print {
.myelement1, .myelement2 { display: none !important; }
}
关于html - CSS @media 打印根本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17942969/