Bei Verwendung von print css wird das vor:body eingefügte Bild im Internet Explorer 8 nicht angezeigt

Question

Ich verwende ein separates Druck-Css auf unserer Website. Es wurde gewünscht, dass wir unser Logo oben auf den gedruckten Seiten haben. Dies ist der Code, den ich für print.css verwende:

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

Das funktioniert mit Firefox, Chrome, Safari und Opera ... und Sie wissen natürlich, was als nächstes kommt.

Es funktioniert nicht in Internet Explorer 8, der anscheinend vorher als Pseudoklasse unterstützt: http://www.quirksmode.org/css/beforeafter_content.html

In der Druckvorschau ist ein Leerraum in der Größe des Logos zu sehen, aber unser Logo wird nicht gedruckt. Wenn ich den Code ändere in:

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

Der "Testtext" wird angezeigt, aber immer noch nicht das Logo.

Hat jemand eine Idee? Es ist sehr schwierig gemacht, dass ich nicht debuggen können aus "Druckvorschau" und einfach den Medientyp auf die CSS-Links ändert etwas völlig anders in den Browser-Bildschirm.

Prost Tama

Answer 1

Sie können standardmäßig keine Hintergrundbilder drucken. Die Benutzer müssen ihre Browsereinstellungen ändern, um Hintergrundfarben und -bilder zu drucken.

Am besten ist es, wenn Sie etwas HTML wie dieses hinzufügen:

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

So etwas lässt sich explizit vor Konfigurationen für Nicht-Druckmedien verbergen:

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