Question

请检查下面的HTML代码。第3个DIV部分可见，因为它被第2个（具有白色背景）覆盖。到目前为止一切都很好，一切都在IE和Firefox中正确显示。

打印页面时问题开始了。在Firefox中，它打印在页面上显示。在Internet Explorer 8中，它以某种方式完全打印所有DIVS。它看起来好像在第二个DIV（或全部）上应用了不透明度滤镜，这使第三个DIV完全可见......

我为页面的打印版本创建了一个带有新内容（在javascript中）的白色叠加层。由于上述问题，它无法正常工作，因为叠加层下方的所有内容也会打印...

为什么IE8会打印这个隐形内容？有解决方案吗？

<html>
<head>
</head>
<body>

<div style="background-color:#999999;position:relative;border:solid 1px black;width:500px;height:500px;">     
    <div style="position:absolute;width:300px;height:200px;top:5px;left:5px;border:dashed 1px #cccccc;z-index:99;background-color:white;"></div>
    <div style="position:absolute;width:100px;height:200px;top:100px;left:50px;border:dashed 5px #cccccc;z-index:98;background-color:white;"></div>
</div>



</body>
</html>

Answer 1

理想的解决方案是将所有样式放在CSS类中，而不是使用内联样式。这为您提供了更好的控制，您可以使用Media Type来定义屏幕上可见的内容以及打印的内容。

以下是一个如何使用CSS类和媒体类型进行处理的示例。

<html>
<head>
<style>
@media screen,print{
  .container{
     background-color:#999999;position:relative;
     border:solid 1px black;width:500px;height:500px;
  }
}
@media screen {
  .hideForPrint{
     position:absolute;width:100px;height:200px;top:100px;left:50px;
     border:dashed 5px #cccccc;z-index:98;background-color:white;
  }
}

@media print {
  .hideForPrint,.hideForPrint2{
    display:none;
  }
}
</style>
</head>
<body>
<div class="container">     
        <div class="hideForPrint"></div>
        <div class="hideForPrint2"></div>
</div>
</body>
</html>

Answer 2

IE有一个选项：

工具/互联网选项/高级/打印/打印背景颜色和图像

默认情况下已关闭。这就是打印时忽略background-color样式的原因。

为什么Internet Explorer 8会打印隐形内容？

2 个答案: