什么是最有用的 media="print" 特定的、跨浏览器兼容的 CSS 属性？

Posted 2023-03-06

【中文标题】什么是最有用的 media="print" 特定的、跨浏览器兼容的 CSS 属性？

【英文标题】：What are most useful media="print" specific, cross browser compatible css properties?

【发布时间】：2011-01-14 16:16:37

【问题描述】：

最有用的media="print" 特定、跨浏览器兼容的 CSS 属性是什么？

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

分页前 分页后 分页符 寡妇 孤儿

请说明何时何地使用这些？哪些是跨浏览器兼容的？除了display:none之外，还有哪些常见的CSS属性可以在打印中有用？

【参考方案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) ") ";
   

【参考方案2】：

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

【参考方案3】：

我使用以下：

 /* 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

【参考方案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"。当您的 UI 中有选项卡时，这很方便，因此即使它们当前未显示，您也可以强制打印它们

在屏幕上显示但不打印

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

不显示在屏幕上而是打印

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