Question

HTML

<div id="printDiv" style="display:none">
    <p>some content here</p>
</div>

<input type="button" id="btnPrint" value="Print"/>

<div>
    <img src="http://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79831/myanmar_tm5_2004349.jpg" height="10000px"/>
</div>

的jQuery

$(function(){
    $("#btnPrint").click(function(){
        window.print();
    });
});

CSS

@media print {
    body * {
       display: none;
    }
    #printDiv, #printDiv * {
       display: block;
    }
    #printDiv {
       position: absolute;
       left: 0;
       top: 0;
    }
}

演示：http://jsfiddle.net/Nu5SX/7/

我想使用Media Queries打印div。但它是打印白页。请帮忙..

Answer 1

因为css的特异性

style="display:none"

覆盖CSS规则

在常规CSS文件中设置display none，而不是在内联属性中设置。

Answer 2

试试这个：

@media print {
    body * {
       display: none;
    }
    #printDiv, #printDiv * {
       display: block !important;
    }
    #printDiv {
       position: absolute;
       left: 0;
       top: 0;
    }
}

媒体查询打印无法正常工作

2 个答案: