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

时间:2011-07-19 07:49:36

标签: css printing

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

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

我已经完成了


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

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

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

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

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