Utilizzo di stampa css, immagine aggiunta prima: corpo non visualizzato in Internet Explorer 8

Question

Sto utilizzando un css di stampa separato sul nostro sito web. È stato richiesto di avere il nostro logo nella parte superiore delle pagine stampate. Questo è il codice che sto utilizzando per print.css:

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

Questo funziona su Firefox, Chrome, Safari e Opera ... e, naturalmente, si sa quello che accadrà dopo.

Non funziona in Internet Explorer 8, che supporta a quanto pare, prima come una pseudo-classe: http://www.quirksmode.org/css/beforeafter_content.html

In anteprima di stampa c'è uno spazio vuoto delle stesse dimensioni del logo, ma il nostro logo non stampa. Se cambio il codice in:

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

Il "Testo di prova" mostra, ma non ancora il logo.

Qualcuno ha qualche idea? È molto difficile non poter eseguire il debug di "anteprima di stampa" e il semplice cambio del tipo di supporto sui collegamenti CSS rende qualcosa di completamente diverso nella schermata del browser.

Acclamazioni Tama

Answer 1

Non è possibile stampare immagini di sfondo di default. Gli utenti devono modificare le impostazioni del browser per stampare i colori e le immagini di sfondo.

La cosa migliore è quella di aggiungere un po 'di HTML come questo:

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

Styling qualcosa di simile da nascondere in modo esplicito da configurazioni dei supporti non-stampa:

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