Почему Internet Explorer 8 печатает невидимый контент?

пожалуйста, просмотрите код HTML ниже. Третий DIV частично виден, потому что он накладывается вторым (который имеет белый фон). Пока все хорошо, все отображается правильно и в IE, и в Firefox.

Проблема начинается, когда я печатаю страницу. В Firefox он печатает, как показано на странице. В Internet Explorer 8 он как-то полностью печатает все DIVS. Похоже, что он применяет фильтр непрозрачности на 2-м DIV (или все), что делает 3-й 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>

Ответ 1

У IE есть опция:

Инструменты/Свойства обозревателя/Расширенные/Печать/Печать цветов и изображений фона

который по умолчанию отключен. Вот почему он игнорирует стили background-color при печати.

Ответ 2

Идеальное решение состоит в том, чтобы поместить все ваши стили внутри классов 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>