CSS @media 打印根本不起作用 [英] CSS @media print not working at all

问题描述

我现在挣扎了几个小时，为什么@media 打印不起作用，我什至在这个网站上搜索了谷歌，但没有任何帮助，所以这就是我发布这个问题的原因.我正在 Google chrome 打印预览 (ctrl p) 上对其进行测试，但我也打印到页面并且它保持空白.

我尝试在页面中制作一个单独的 css 文件和嵌入的 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="blo_header">
<div id="blo_side_top"></div><div id="blo_side_bottom"></div>

CSS 普通样式

div#bruikleenovereenkomst {宽度:595px；高度:842px；背景色:#fff;位置:相对；}div#blo_header {宽度:100%；高度:125px；背景颜色:#FBE983；z-索引:9}div#blo_side_top {宽度:57px；高度:420px；背景色:#B6CAE5;位置:绝对；右:0;顶部:0；z-索引:99；}div#blo_side_bottom {宽度:57px；高度:420px；背景图像:url(../images/leaflet.png);背景重复:不重复；位置:绝对；右:0;底部:0;z-索引:99；}

CSS 打印样式 (print.css) 注意:div#bruikleenovereenkomst 只是一个用于测试的黑块.

@media print{身体 {保证金:0;}h1#logo {显示:无；}ul#菜单{显示:无；}div#bruikleenovereenkomst {宽度:100%；高度:500px；背景色:#000；}div#blo_header {显示:无；}div#blo_side_top {显示:无；}div#blo_side_bottom {显示:无；}}

我打印出来的只是一张空白页.

解决方案

如果你使用@media 打印，你需要在你的样式中添加 !important，否则页面将使用具有更高优先级的元素的内联样式.

例如

<div class="myelement1" style="display:block;">我的 div 有内联样式.</div>

在@media print 中，添加 !important 并成为赢家

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

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.

I try'd to make a separate css file and also a embedded css style into the page.

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

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

    </div>

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

CSS normal styles

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.

@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.

解决方案

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.

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 {
   .myelement1, .myelement2 { display: none !important; }
}

这篇关于CSS @media 打印根本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！