CSS @media print non funziona affatto

Question

Sono in difficoltà da ore ora perché la stampa @media non funziona, cerco su Google anche su questo sito e nulla è stato di aiuto, ecco perché ho posto questa domanda. Lo sto testando su Google Chrome anteprima di stampa (ctrl p) ma ho anche stampato a pagina e rimane vuoto.

Ho provato a creare un file css separato e anche uno stile css incorporato nella pagina.

Ecco il mio codice

intestazioni

<link rel="stylesheet" type="text/css" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> 

HTML

<div id="bruikleenovereenkomst"> 
    <div id="blo_header"> 

    </div> 

    <div id="blo_side_top"></div> 
    <div id="blo_side_bottom"></div> 
</div>  

CSS stili normali

div#bruikleenovereenkomst { 
    width:595px; 
    height:842px; 
    background-color:#fff; 
    position:relative; 
} 

div#blo_header { 
    width:100%; 
    height:125px; 
    background-color:#FBE983; 
    z-index:9 
} 

div#blo_side_top { 
    width:57px; 
    height:420px; 
    background-color:#B6CAE5; 
    position:absolute; 
    right:0; 
    top:0; 
    z-index:99; 
} 

div#blo_side_bottom { 
    width:57px; 
    height:420px; 
    background-image:url(../images/leaflet.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    right:0; 
    bottom:0; 
    z-index:99; 
} 

stili di stampa CSS (print.css) nota: il div #bruikleenovereenkom st è solo un blocco nero per i test.

Tutto ciò che ottengo con la stampa è solo una pagina vuota.

Answer 1

Se si utilizza @media print, è necessario aggiungere! Importante nei propri stili, altrimenti la pagina utilizzerà gli stili in linea dell'elemento con priorità più alta.

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div> 

In @media stampa, aggiungere! Importante e di essere un vincitore

@media print { 
    .myelement1, .myelement2 { display: none !important; } 
} 

Answer 2

Innanzitutto, proverei ad aggiungere uno spazio dopo la stampa. Potrebbe non fare la differenza, ma .....

@media print { 
    /*print css here*/ 
} 

Successivamente, la stampa nei browser di solito ignora i colori di sfondo. Provate ad usare 'box-shadow' ....

@media print { 
    #bruikleenovereenkomst { 
     width: 100%; 
     height: 500px; 
     box-shadow: inset 0 0 0 1000px #000; 
    } 
} 

Smashing Magazine ha ottimi suggerimenti: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ noti che si parla sulla stampa da un browser Webkit (Chrome o Safari, per esempio), e il tentativo di forzare la stampante per rendere i colori come appaiono sullo schermo utilizzando una query multimediale separata .....

@media print and (color) { 
    * { 
     -webkit-print-color-adjust: exact; 
     print-color-adjust: exact; 
    } 
} 

Spero che questo aiuti!