媒體查詢打印工作不

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

由於

style="display:none" 

的CSS具體覆蓋CSS規則

設置在常規CSS文件顯示無，而不是在一個內聯屬性。

Answer 2

試試這個：

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