Question

我有一个黑色文字和白色背景的div。在IE9中显示得很好。但是，在打印预览中，白色背景是透明的。适用于Chrome，Firefox和Safari。有什么想法吗？

以下链接显示该页面。显示很好，但地图右下角的白框在打印预览中具有透明背景。

http://www.mycoursewalk.com/course_walk/print/426

谢谢，

尼克，

Answer 1

IE默认情况下不会打印背景图像和颜色。有一个设置，您可以更改为打印背景图像和网页的颜色[文件＆gt;打印预览＆gt;页面设置（齿轮图标）]。

我处于类似的情况，我无法控制客户端的浏览器设置。在尝试了许多其他方法之后，我最终使用了以下逻辑： -

添加了一张图像（1px xpp，白色），绝对位置位于前0位，左侧0位。
将其设置为在@media screen {.div {display：none}中显示为none，并在@media print中显示块{.div {display：block}
使用javaScript将图像的高度（在您的情况下也可能需要宽度）设置为文本为div的高度：$（'＃whiteBg'）。height（$（' 。＃内容'）的高度（））;

HTML：

<body>
    <div id="wrapper"> <!-- not necessary -->
        <img scr="./img/white.png" id="whiteBg" />
        <div id="content">
            <!-- content here -->
        </div>
    </div>
    <div id="footer">
    </div>
</body>

的CSS：

@media screen {
    #whiteBg {
        display: none;
    }
}

@media print {
   #whiteBg {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; //to send it to the background
   }
}

jquery的：

 @('#whiteBg').height(  $('#content')).height()  );

我正在使用此代码将页脚设置在打印输出的最后一页的底部。我在每个页面都有页脚，并且在其上面有内容（文本），就像你的一样。除了最后一页，我用白色背景隐藏了页脚。 HTML footer on bottom of all pages of HTML print out in IE

白色背景div在IE9打印预览中是透明的

1 个答案: