印刷版

Question

から影を削除し、私は、ウェブサイトの印刷版は、メイン（紙）のdivの周りに影を持っていないだろうと期待してhttp://www.canadaiplawyer.com/でこのコードを持っています動作していないと私はまだ印刷時に影を得る？

Answer 1

影が実際に#nonfooterに設定されていて、#contentに設定されていないようです。おそらく、使用したい：

@media print{ 
    #nonfooter { 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow:   none; 
    } 
} 

また、それはより高い特異性を持っていることを確認するために、@mediaタグが後にすべての通常の宣言が来ることを確認してください。 （別のCSSファイルにある場合は、通常のタグの後に<link>タグを付けてください。）

Answer 2

重要です。以下のコードは、印刷スタイルシートの標準です。

/* ==|== print styles ======================================================= 
Print styles. 
Inlined to avoid required HTTP connection: h5bp.com/r 
========================================================================== */ 

@media print { 
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ 
    a, a:visited { text-decoration: underline; } 
    a[href]:after { content: " (" attr(href) ")"; } 
    abbr[title]:after { content: " (" attr(title) ")"; } 
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ 
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
    thead { display: table-header-group; } /* h5bp.com/t */ 
    tr, img { page-break-inside: avoid; } 
    img { max-width: 100% !important; } 
    @page { margin: 0.5cm; } 
    p, h2, h3 { orphans: 3; widows: 3; } 
    h2, h3 { page-break-after: avoid; } 
}