Question

我有一个HTML页面。使用标题正文和页脚。

在Body中我有两个部分Primary（左）和Rail（右）。主要包含Article和rail包含一些模块。我想写一个只在主要文章中打印文章的CSS。

我已经完成了


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

这两个属性在print.css中正常工作

但是当我做#rail {display：none}时它不会隐藏，我仍然会得到整个身体。如果我隐藏出现在铁轨内的元素，他们也会隐藏。但铁路没有。

有人可以告诉我可能出现的问题。

Answer 1

我发现这个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();
    };

Answer 2

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

我只是在猜测，但找出问题的最佳方法是使用print.css加载页面并使用Firebug进行搜索......

我该如何处理这款打印机友好的CSS？

2 个答案: