CSS @mediaプリントがまったく機能しない

Question

@mediaのプリントがうまくいかない理由で何時間も苦労しています。私はこのサイトでもGoogleで検索して何も助けなかったので、私はこの質問を投稿しています。 Google Chromeの印刷プレビュー（ctrl p）でテストしていますが、ページにも印刷されていて空白のままです。

私は別のCSSファイルと埋め込まれたCSSスタイルをページに作成しようとしました。ここで

は私のコードは

ヘッダ

<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ノーマルスタイル

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

CSSの印刷スタイルです（print.css）注意：div要素#bruikleenovereenkom stはテスト用の黒いブロックです。

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

} 

印刷するだけで空白のページが表示されます。

Answer 1

@media printを使用している場合は、スタイルに！importantを追加する必要があります。そうしないと、優先度の高い要素のインラインスタイルが使用されます。

など。 @media印刷で

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

、重要！追加して印刷されていないかもしれない勝者

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

Answer 2

まず、印刷後にスペースを追加してみます。差をつけることはできませんが、...

次に、ブラウザでの印刷では通常、背景色が無視されます。

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

スマッシングマガジンは、いくつかの優れた指針がある....「ボックスシャドウ」を使用してみてください：彼らは（例えば、クロムやサファリ）のWebkitブラウザからの印刷について話すことhttp://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ 注意をし、強制しようとします別のメディアクエリを使用して、画面上に表示されるように色をレンダリングするプリンタ。.....

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

これは役に立ちます。