首页 文章

CSS @media打印根本不起作用

提问于
浏览 次
18

我正在努力工作几个小时，为什么@media打印不起作用，我甚至在这个网站上搜索谷歌并没有任何帮助，所以这就是我发布这个问题的原因 . 我正在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只是一个用于测试的黑色块 .

@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;
    }

}

我得到的所有印刷只是一个空白页面 .

html css printing

2 回答

  • 21

    如果您使用的是@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; }
}
    回复于
  • 14

    首先，我会尝试在打印后添加一个空格 . 可能没什么区别，但.....

    @media print {
     /*print css here*/
}

    接下来，在浏览器中打印通常会忽略背景颜色 . 尝试使用'box-shadow'....

    @media print {
     #bruikleenovereenkomst {
         width: 100%;
         height: 500px;
         box-shadow:  inset 0 0 0 1000px #000;
     }
}

    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;
   }
}

    希望这可以帮助！

    回复于

相关问题