javascript window.print CSS @media不能正常工作

当用户点击打印按钮时，我有这个JS功能。javascript window.print CSS @media不能正常工作

<script> 
function printDiv() 
{ 
    var printer = window.open('','','width=300,height=300'); 
    printer.document.open("text/html"); 
    printer.document.write(document.getElementById('news_contents').innerHTML); 

    printer.print(); 

} 
</script>

而且我包括CSS作为

@media print { 

    #news_content { 
    color: #666; 
     font-size: 12px; 
    font-family: Arial,Helvetica,sans-serif; 
    } 
}

然而，当用户打印时，CSS并不适用。我检查了HTML标题，CSS脚本确实存在。为什么它不起作用？当用户从Mac打印时，内容区域中的图像缩小并变小。无论如何，我可以拥有完全一样的网站？

在此先感谢。

来源

2012-10-03 Sylph

希望它有帮助http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/ –

嗨@SantiagoRebella感谢您的链接。在我的编码中似乎没有任何错误，不知道为什么不应用CSS。 – Sylph

我相信你有问题，因为你的@media宣言是在父窗口;并且您打开一个新窗口并将内容添加到其中以进行打印。

因此，新窗口中的新文档对您的@media CSS声明一无所知。

来源

2012-10-03 20:22:00

嗨，谢谢你的回答。如果我不使用window.open，我应该怎么办？我试图删除window.open，但它不会打印。谢谢！ – Sylph

你好，谢谢你的指针。我设法从你指出的问题中解决问题。谢谢！ – Sylph

我有同样的问题，我做什么，是把：

<style> 
    @media print 
    { 
    /..../ 
    } 
</style>

的DIV里面 - 我相信这是你的情况news_contents。
希望有所帮助。

来源

2013-03-02 20:23:36 Tamiko

javascript window.print CSS @media不能正常工作

回答

相关问题