Why does Internet Explorer 8 print invisible conte

please check the HTML code below. The 3rd DIV is partially visible because it is overlayed by the 2nd (which has a white background). All good so far, everything displays correctly in both IE and Firefox.

The problem starts when I print the page. In Firefox it prints as displayed on the page. In Internet Explorer 8 it somehow prints all DIVS completely. It looks as if it applies a opacity filter on the 2nd DIV (or all) which makes the 3rd DIV completely visible...

I create a white overlay with new contents (in javascript) for a Print version of a page. Because of the issue described above it doesn't work correctly because all content below the overlay is also printed...

Why does IE8 print this invisible content? Is there a solution?

<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>

标签： html css printing internet-explorer-8

2条回答

叛逆

2楼-- · 2019-07-13 11:13

The ideal solution is to put all your styles inside CSS classes instead of using inline styles. This gives you greater control and you can use the Media Type to define what is visible on the screen and what gets printed.

Here's an example of how you can approach this with CSS classes and Media Types.

<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>

0人赞添加讨论(0) 举报

Why does Internet Explorer 8 print invisible conte

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间