Uso de css de impresión, imagen agregada antes: no se muestra el cuerpo en Internet Explorer 8

Question

Estoy utilizando un css de impresión por separado en nuestro sitio web. Se ha solicitado que tengamos nuestro logotipo en la parte superior de las páginas impresas. Este es el código que estoy usando para print.css:

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

Esto funciona en Firefox, Chrome, Safari y Opera ... y por supuesto que sabe lo que vendrá después.

No funciona en Internet Explorer 8, que al parecer es compatible antes como un pseudo-clase: http://www.quirksmode.org/css/beforeafter_content.html

en la vista preliminar no es un espacio en blanco del mismo tamaño que el logotipo de nuestro logotipo, pero no imprime. Si cambio el código a:

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

Aparece el mensaje "Texto de prueba", pero todavía no el logotipo.

¿Alguien tiene alguna idea? Se hizo muy difícil que no pueda depurar la "vista previa de impresión" y simplemente cambiar el tipo de medio en los enlaces CSS hace que algo completamente diferente en la pantalla del navegador.

Saludos Tama

Answer 1

No puede imprimir imágenes de fondo por defecto. Los usuarios deben cambiar la configuración de su navegador para imprimir colores e imágenes de fondo.

Su mejor opción es añadir un poco de HTML así:

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

Styling algo como esto para ocultar explícitamente de configuraciones de papel no impreso:

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