秀格打印

问题描述：

当比方说，我有秀格打印

<div id="printOnly"> 
    <b>Title</b> 
    <p> 
     Printing content 
    </p> 
</div>

是否有可能隐藏这个div打印时，这个div时，页面渲染，并只显示？

可能重复[只打印

？ ]（http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only） –

答

你需要一些CSS为

#printOnly { 
    display : none; 
} 

@media print { 
    #printOnly { 
     display : block; 
    } 
}

答

@media screen 
{ 
    #printOnly{display:none;} 
} 

@media print 
{ 
    #printOnly{} 
}

根据标记，printOnly是id，并且您在css中使用了类选择器。 – nikhil

我做了编辑，锐利的眼睛.... nikhil –

感谢您的更新和赞美。 – nikhil

答

可以将外部CSS样式表与media="print"属性：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

答

您应该使用媒体查询。

你的情况：

#printOnly { 
    display: none; 
} 

@media print { 
    #printOnly { 
     display: block; 
    } 
}

PS到这里看看http://www.joshuawinn.com/css-print-media-query/对浏览器的支持

答

我认为最好的解决办法是创建一个围绕非打印的东西的包装：

<head> 
    <style type="text/css"> 

    #printable { display: none; } 

    @media print 
    { 
     #non-printable { display: none; } 
     #printable { display: block; } 
    } 
    </style> 
</head> 
<body> 
    <div id="non-printable"> 
     Your normal page contents 
    </div> 

    <div id="printable"> 
     Printer version 
    </div> 
</body>

答

/*for printer*/ 
@media print { 
    #printOnly { } 
     /* write your css rules*/ 

} 
/*for desktop*/ 
    @media screen { 
    #printOnly { display: none;} 
      /*for all display view*/     
}

答

@media screen { #printOnly:{display:none;} } 
@media print{ #printOnly:{display:block;} }

答

你需要媒体查询

@media screen { /* for screen option*/ 

p { 

     font-family: verdana, sans-serif; 

     font-size: 17px; 

    } 

    }

@media打印{/ *打印和屏幕选项之间切换打印选项*/

p { 

    font-family: georgia, serif; 
    font-size: 14px; 
    color: blue; 
    } 

    }

http://www.w3schools.com/css/css_mediatypes.asp

相关推荐