Javascript 打印不工作的媒体查询

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>

CSS

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

演示：

我想使用媒体查询打印div。 但它正在打印白页。

---

请帮助..

因为

style="display:none" 

覆盖CSS规则

在常规CSS文件中，而不是在内联属性中设置“无显示”。

尝试以下操作：

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

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