使用print css,之前添加的图像:正文未在Internet Explorer 8中显示

Question

我在我们的网站上使用单独的print css.我们要求我们在打印页面的顶部放置我们的徽标.这是我用于print.css的代码:

body:before {
content: url(../images/logo.gif);
}

这适用于Firefox,Chrome,Safari和Opera ...当然,你知道接下来会发生什么.

它在以前作为伪类显然支持的Internet Explorer 8中不起作用:http://www.quirksmode.org/css/beforeafter_content.html

在打印预览中,有一个与徽标大小相同的空白区域,但我们的徽标不会打印.如果我将代码更改为:

content: "Test Text" url(../images/logo.gif);

"测试文本"显示,但仍然没有徽标.

有没有人有任何想法？我无法调试"打印预览"并且简单地更改CSS链接上的媒体类型在浏览器屏幕中呈现完全不同的内容变得非常困难.

干杯多摩

Answer 1

默认情况下,您无法打印背景图像.用户需要更改其浏览器设置以打印背景颜色和图像.

你最好的办法是添加一些像这样的HTML:

<div class="PrintOnly">
  <img id="PrintLogo" src="logo.gif"/>
</div>

使用这样的样式来明确隐藏非打印介质配置:

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }