Rop*_*tah 2 html css printing internet-explorer-8
请检查下面的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>
Jos*_*lio 13
理想的解决方案是将所有样式放在CSS类中,而不是使用内联样式.这为您提供了更好的控制,您可以使用" 媒体类型"来定义屏幕上可见的内容以及打印的内容.
这是一个如何使用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>