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

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

2 голосов
/ 10 июня 2009

пожалуйста, проверьте HTML-код ниже. 3-й DIV частично виден, потому что он наложен на 2-й (который имеет белый фон). Пока все хорошо, все отображается правильно как в 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>

Ответы [ 2 ]

13 голосов
/ 10 июня 2009

Идеальное решение - поместить все ваши стили в классы CSS вместо использования встроенных стилей. Это дает вам больший контроль, и вы можете использовать Тип носителя , чтобы определить, что видно на экране и что печатается.

Вот пример того, как вы можете подойти к этому с помощью классов CSS и 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>
8 голосов
/ 10 июня 2009

IE имеет опцию:

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...