媒体打印css在IE11打印预览中不起作用
我有一个与css应用页面。为了自定义打印，在同一个css文件中，我有一些@media打印样式。这些在执行打印时工作得非常好，但是，在使用IE11进行测试时，我已经意识到预览的工作就像没有考虑媒体打印样式一样。另一方面，如果我定义了一个全新的css样式，并将其链接为打印样式表，那么预览也可以正常工作(然而，这迫使我在此css中复制在普通css样式表中定义的许多样式，我不想在打印中更改这些样式)。
我不知道它是否能帮上忙，但我打印页面的方式是调用一个javascript函数，它只选择html页面中div的内容(# content )，然后打印它(还在打印页面的底部添加一个版权声明和一个徽标)
function printit() {
var body = document.getElementById('content').innerHTML;
var tmpWin = window.open('', '', 'width=640,height=480');
tmpWin.document.open("text/html");
tmpWin.document
.write("<html><head><link rel='stylesheet' href='css/stylesheet.css'></head><body>");
tmpWin.document.write(body);
//we add the copyright notice
tmpWin.document.write("<div id='footer'><p>© <script>document.write(new Date().getFullYear())</script> - All rights reserved</p><img id='logo_vertical' alt='DCL' src='img/logo_vertical.png'></div>")
tmpWin.document.write("</body></html>");
tmpWin.document.close();
tmpWin.print();
tmpWin.close();
}你知道为什么我会有这个问题吗？
谢谢
回答 3
Stack Overflow用户
发布于 2015-10-21 04:37:20
我看到了你的问题，但没有任何答案。我在使用ExtJS 4.2.2的IE11中也遇到了同样的问题，我很难找到解决方案。
IE11似乎正在使用整个页面作为参考来适应窗口内容，而不是像预期的那样只适合窗口。如果您使用Print Preview，您可以检查此行为。
在深入研究，测试了许多变通方法之后，我终于找到了一个可行的解决方案。在我的例子中，我需要做的是修改打印脚本，如下所示：
<div id="print">
<button type="button" onclick="document.execCommand('print', false, null);">Print</button>
</div>在您的示例中，下面的代码应该可以工作(而不是tmpWin.print())：
tmpWin.document.execCommand('print', false, null);正如您所看到的，使用"document.execCommand“代替了经典的"window.print”函数。
我知道你发布它已经快一年了，我想你已经让它工作了。然而，为了社区的利益，这里有一个解决方案。我希望这对任何人都有帮助。
Stack Overflow用户
发布于 2018-12-06 15:24:56
使用这个
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
css here
}Stack Overflow用户
发布于 2020-10-07 22:12:00
我将css样式添加到
@media print { //css here }
然后确保在IE上的打印设置中选中了打印背景色和图像，以便能够将您的样式(颜色和背景)应用于打印的页面
https://stackoverflow.com/questions/26747468
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号