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

请检查下面的HTML代码。第3个DIV部分可见，因为它被第2个覆盖（其具有白色背景）。目前为止，IE和Firefox都能正常显示。为什么Internet Explorer 8打印不可见的内容？

打印页面时出现问题。在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>

来源

2009-06-10 Ropstah

RichieHindle可能有问题标记。打印时不能依赖颜色和类似的视觉技巧 - 为了确保每张浏览器都能按照自己的规格操作页面，纸张之间具有良好的对比度（当第一个Opera用户尝试打印时，您会喜欢它，特别是如果您使用CSS打印建议分页符）。如果您希望在屏幕上看到它，您就需要简单一些 - 只使用CSS的主要功能，不要依赖副作用来实现布局。为此，大多数网站都有单独的可打印页面。 – David 2009-06-10 12:25:56

他确实是真的。但是要求用户更改打印设置并不合适。我最终隐瞒了完成这项工作的其余内容。 – Ropstah 2009-06-10 13:20:37

IE有一个选项：

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

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

来源

2009-06-10 12:05:49 RichieHindle

我不希望用户更改打印设置，所以这不是我的解决方案。我最终隐藏了Jose Basilio建议的其余内容。然而，你的回答对我的问题是正确的。这也给了我最好的洞察力！ – Ropstah 2009-06-10 12:31:40

理想的解决方案是将所有样式放入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>

来源

2009-06-10 12:06:22

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

回答

相关问题