7

我有一个带有黑色文本和白色背景的 div。在 IE9 中显示得很好。但是，在打印预览中，白色背景是透明的。在 Chrome、Firefox 和 Safari 中运行良好。有任何想法吗？

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

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

谢谢，

缺口，

4

1 回答 1

6

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

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

  1. 添加了一个绝对位置在顶部 0 和左侧 0 的图像（1px x 1px，白色）。

  2. 将其设置为在@media screen{ .div {display: none} 中不显示，并在@media print{ .div {display: block} 中显示块

  3. 使用 javaScript 将图像的高度（在您的情况下可能还需要宽度）设置为文本所在的 div 的高度： $('#whiteBg').height($('#content').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()  );

我正在使用此代码将页脚设置在打印输出的最后一页的底部。我的每一页都有页脚，上面有内容（文本），就像你的一样。我使用白色背景来隐藏除最后一页之外的所有页脚。在 IE 中打印出所有 HTML 页面底部的 HTML 页脚

于 2013-07-08T03:41:03.553 回答