可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

IE has an option:

Tools / Internet Options / Advanced / Printing / Print background colours and images

which is off by default. This is why it's ignoring your background-color styles when printing.

回答2:

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>