Используя print css, изображение добавлено ранее: тело не отображается в Internet Explorer 8

Question

Я использую отдельную распечатку css на нашем сайте. Было запрошено, чтобы у нас был логотип в верхней части печатных страниц. Это код, который я использую для print.css:

body:before {
content: url(../images/logo.gif);
}

Это работает в Firefox, Chrome, Safari и Opera ... и, конечно, вы знаете, что будет дальше.

Он не работает в Internet Explorer 8, который, по-видимому, поддерживается ранее как псевдокласс: http://www.quirksmode.org/css/beforeafter_content.html

В предварительном просмотре печати есть пустое пространство того же размера, что и логотип, но наш логотип не печатается. Если я изменю код на:

content: "Test Text" url(../images/logo.gif);

«Тестовый текст» показывает, но все же не логотип.

У кого-нибудь есть идеи? Это очень затрудняет то, что я не могу отладить «предварительный просмотр», и простое изменение типа мультимедиа в ссылках CSS отображает что-то совершенно другое на экране браузера.

Приветствие Tama

Answer 1

Вы не можете распечатать фоновые изображения по умолчанию. Пользователям необходимо изменить настройки браузера для печати цветов фона и изображений.

Лучше всего добавить HTML-код следующим образом:

<div class="PrintOnly">
  <img id="PrintLogo" src="logo.gif"/>
</div>

Стилизация чего-то подобного для явного скрытия от непечатных конфигураций носителя:

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }