Wydruki CSS @media w ogóle nie działają

Question

Długo walczę o to, dlaczego druk @media nie działa, szukam w Google nawet na tej stronie i nic nie pomogło, dlatego właśnie zamieszczam to pytanie. Testuję to na podglądzie wydruku Google Chrome (ctrl p), ale również wydrukowałem na stronie i pozostaje puste.

Próbowałem zrobić osobny plik CSS, a także osadzony styl CSS na stronie.

Oto mój kod

Główki

<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 Style normalnego

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; 
} 

Print Styl CSS (print.css) uwaga: div #bruikleenovereenkom st to po prostu czarny blok do testowania.

@media print{ 

    body { 
     margin:0; 
    } 

    h1#logo { 
     display:none; 
    } 

    ul#menu { 
     display:none; 
    } 

    div#bruikleenovereenkomst { 
     width:100%; 
     height:500px; 
     background-color:#000; 
    } 

    div#blo_header { 
     display:none; 
    } 

    div#blo_side_top { 
     display:none; 
    } 

    div#blo_side_bottom { 
     display:none; 
    } 

} 

Wszystko, co dostaję z drukowaniem, to po prostu pusta strona.

Answer 1

Jeśli używasz @media print, musisz dodać! Ważne w swoich stylach, lub strona użyje wbudowanych stylów elementów, które mają wyższy priorytet.

E.g.

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

W @media druku, dodać! Ważny i być zwycięzcą

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

Answer 2

Po pierwsze, spróbuj dodać spację po wydruku. Nie ma znaczenia, ale .....

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

Następnie, drukowanie w przeglądarkach zwykle ignoruje kolory tła. Spróbuj użyć 'box-shadow' ....

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

Smashing Magazine ma kilka doskonałych wskazówek: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Zauważ, że rozmawiają na temat drukowania z poziomu przeglądarki Webkit (Chrome lub Safari, na przykład), i próbuje zmusić drukarkę, aby renderować kolory wyświetlane na ekranie, używając osobnego zapytania o media .....

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

Mam nadzieję, że to pomoże!