CSS @media print 根本不起作用答案

【问题标题】：CSS @media print not working at allCSS @media print 根本不起作用
【发布时间】：2013-07-30 08:39:10
【问题描述】：

我现在挣扎了好几个小时，为什么@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 只是一个用于测试的黑块。

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

}

我通过打印得到的只是一张空白页。

【问题讨论】：

可能背景没有打印出来？尝试在那里放一些真实的内容，看看它是否有效。
但是我需要一个彩色打印页.... 有没有办法让 div 打印颜色？
在stackoverflow上阅读其他答案似乎这是浏览器中的一个设置，您不能用css覆盖。
...是的，我现在找到了，很抱歉，我认为这只是 @media 打印不起作用，但只是背景颜色不起作用。
@user1502014 您可以在浏览器选项中打开打印背景颜色/图像。这不是您可以远程覆盖的东西。如果您的颜色传输重要信息并且您不能依赖用户打开该选项，则您将需要使用除背景颜色之外的其他东西来传输该信息。独立于印刷：您不应该单独使用颜色来传输信息以获得良好的可访问性。不是每个人都能看到颜色！

标签： html css printing

【解决方案1】：

如果您使用@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; }
}

【讨论】：

嗯。 !important 可能有点过分了，因为它使样式更难以覆盖。
如果 !important 仅用于@media 打印，它不应影响正常的页面样式。它并不优雅，但如果你有内联样式，你需要一种方法来覆盖它们，因为它们本身并不是很优雅。
好吧，显然我不能不同意内联样式。
+1 给你，！重要的是我发疯的秘密，比如将字体大小更改为 500% 以尝试强制更改。感谢您的提示！

【解决方案2】：

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

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

希望这会有所帮助！

【讨论】：

正在寻找背景颜色：'），难怪我没有看到变化。

【解决方案3】：

window.print() 是一个异步函数，因此如果您在调用它后立即管理 DOM - 您可能会遇到这样的空白打印问题。解决方案是将 DOM 管理移至 beforeprint 和 afterprint 事件的事件回调函数：

onbeforeprint
onafterpring

注意：在调用window.print函数之前注册这两个回调

Safari 浏览器不支持这两个事件。

【讨论】：

【解决方案4】：

您需要在您打印的 div 元素中添加打印媒体样式

【讨论】：