为什么 Internet Explorer 8 打印不可见的内容？答案

【问题标题】：Why does Internet Explorer 8 print invisible content?为什么 Internet Explorer 8 打印不可见的内容？
【发布时间】：2010-11-01 18:52:46
【问题描述】：

请检查下面的 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>

【问题讨论】：

RichieHindle 可能已经标记了问题。打印时不能依赖颜色和类似的视觉技巧 - 以确保在纸张上具有良好的对比度，每个浏览器都会根据自己的规范操作页面（当您的第一个 Opera 用户尝试打印时，您会喜欢它，特别是如果您使用 CSS 打印建议，例如分页符）。如果您希望它像您在屏幕上看到的那样打印，您需要简单 - 仅使用 CSS 的主要预期功能，不要依赖副作用来实现您的布局。大多数网站为此目的只有一个单独的可打印页面。
没错，他是正确的。然而，要求用户更改打印设置是不可取的。我最终隐藏了完成这项工作的其余内容。

标签： html css printing internet-explorer-8

【解决方案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>

【讨论】：

我使用不同的样式表进行打印和屏幕显示。这只是一个例子。在我的例子中，正确的答案是：添加“display:none;”到第 3 个 DIV。 +1 给出与我已有的解决方案相同的答案！

【解决方案2】：

IE 有一个选项：

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

默认关闭。这就是为什么它在打印时会忽略您的 background-color 样式。

【讨论】：

我不希望用户更改打印设置，所以这不是我的解决方案。我最终按照 Jose Basilio 的建议隐藏了其余的内容。但是，您的回答对我的问题是正确的。这也让我对问题有了最好的了解！