什么是最有用的media =“print”特定的，跨浏览器兼容的css属性？

Question

哪些是最有用的media="print"特定的，跨浏览器兼容的CSS属性？

我认为我们有这5个属性用于打印特定。

1. 分页-前
2. 分页-后
3. 分页-内
4. 寡妇
5. 孤儿

请说明何时何地使用这些？哪些是跨浏览器兼容的？什么是其他常见的CSS属性在打印时很有用，而不是display:none？

Answer 1

当我需要制作页面的可打印版本时，我使用着名的A列表分隔文章（CSS Design: Going to Print）和this article。有一些常见的标签，但很多取决于您使用的css模型（以及容器填充和边距）：

body {
   background: white;
   font-size: 12pt;
   }
#menu {
   display: none;
   }
#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.alistapart.com" attr(href) ") ";
   }

Answer 2

我使用以下内容：

 /* Browser will TRY to avoid spanning content within across a page */
 tr, td, th {page-break-inside:avoid}

 /* Repeat table headers when table spans a page */
 thead {display:table-header-group}

  /* Apply to anything you don't want to print */
 .NoPrint {visibility:hidden; display:none}

Answer 3

css-tricks.com的Chris Coyier写了一篇很棒的文章： http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Answer 4

本着分享的精神，这里有一些我经常使用的规则。它们与SemanticUI很好地配合，但在其他地方可能会有所帮助

[class*="printed only"] {
    display:    none;
}

@media print {
    .printed {
        display:    initial !important;
        opacity:    1 !important;
    }

    [class*="non printed"] {
        display:    none !important;
        opacity:    0 !important;
    }
}

在屏幕上显示并打印

使用class="printed"。当您在用户界面中有选项卡时，这很方便，因此即使它们当前没有显示，也可以强制它们打印

在屏幕上显示但不打印

使用class="non printed"。这对于导航元素和其他您不想打印的内容非常方便

不要在屏幕上显示但是打印

使用class="printed only"。我发现在打印版本上包含一些可能与网络版本无关的网页的元数据非常方便 - 例如页面生成的日期/时间，打印文档的人的用户名，链接（如果从标题）和软件。