web-dev-qa-db-ja.com

CSS @media印刷がまったく機能しない

@media printが機能しない理由を何時間も苦労しています。このサイトでも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＃bruikleenovereenkomstは、テスト用の単なる黒いブロックです。

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

}

印刷で得られるのは、空白のページだけです。

htmlcssprinting
22
Julez

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

例えば。

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

@media printで、！importantを追加して勝者になる

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

まず、印刷後にスペースを追加してみます。違いはありませんが、.....

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

次に、ブラウザでの印刷は通常、背景色を無視します。 「box-shadow」を使用してみてください。..

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

Smashing Magazineには優れたポインターがいくつかあります。 http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Webkitブラウザー（ChromeやSafariなど）、および別のメディアクエリを使用して、画面に表示される色をプリンターに強制的にレンダリングしようとしています。

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

お役に立てれば！

16
Nostalgia80