如何处理这个打印机友好的CSS？

身体我有两个部分主要（左）和铁路（右）。主要包含文章和铁路包含一些模块。我想写的只是在主要打印文章的CSS。

我已经做了

 

#header{display:none;} 
#footer{display:none;}

这两个属性在print.css

正常工作，但是当我做#rail {显示：无}它不生皮和我仍然得到了整个身体。如果我隐藏栏杆内出现的元素，它们也会隐藏。但铁路没有。

有人可以建议我可能会出错。

来源

2011-07-19 sushil bharwani

您是否有公开的网页会重现此问题？如果没有示例，我会猜测规则未被匹配（例如，元素使用类而不是id），或者规则被另一个“显示”规则覆盖。这可以是内联样式，稍后的＃rail规则或具有更高特定性的规则。 – detaylor

查看#rail部分的内嵌样式，它可能会覆盖您的display:none;。如果仍然显示，请尝试在display:none;之后添加!important。

我只是猜测那里，但最好的方法，找出发生了什么错，是与您print.css载入您的网页，并通过它与萤火虫搜索左右...

来源

2011-07-19 07:56:25

我在做打印预览时如何使用萤火虫... –

正如我告诉你的，在使用Firebug之前，使用print.css而不是标准页面加载网页... –

我发现这jquery工作的很好，你可以选择在你的打印版本中显示哪些字段，你也可以添加任何CSS到头上，包括文件或者只是几个类。

function printPage(){ 
     var w = window.open(); 

     var headers = $("#headers").html(); 
     var field= $("#field1").html(); 
     var field2= $("#field2").html(); 

     var html = "<!DOCTYPE HTML>"; 
     html += '<html lang="en-us">'; 
     html += '<head><style></style></head>'; 
     html += "<body>"; 

     //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space 
     if(headers != null) html += headers + "<br/><br/>"; 
     if(field != null) html += field + "<br/><br/>"; 
     if(field2 != null) html += field2 + "<br/><br/>"; 

     html += "</body>"; 
     w.document.write(html); 
     w.window.print(); 
     w.document.close(); 
    };

来源

2013-04-19 15:42:10

如何处理这个打印机友好的CSS？

回答

相关问题