如何處理這個打印機友好的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？

回答

相關問題