Css 在IE/Chrome/Firefox中打印预览（或打印）时不显示图像

我是一名网络开发人员，几乎从未从事过设计工作，但我一直在努力纠正这个错误

打印/显示打印预览页面时，某些图像显示正确，而其他图像显示不正确。我能看到的关键区别是，没有出现的图像是跨度标记，图像应用于css，而工作图像使用img标记

以下是html的示例：

带有“图标”的跨度不显示：

1889
出生于？

Image.gif不显示：

配偶
丈夫

？&45

在某些浏览器中，它在预览中看起来正常，但不打印，在其他浏览器中，它不打印，但仍然不打印

---

提前谢谢你

两个多月前我也有同样的问题。我有一个按钮将用户重定向到打印机友好的页面，然后我使用Javascript触发打印对话框

问题是浏览器并没有等到CSS背景中指定的图像被下载

我在触发打印对话框之前设置了超时，以便浏览器有时间下载图像。这种方法是不可靠的，因为没有人有恒定的下载速度，它会在图像下载到互联网连接非常慢的用户之前打开打印对话框

---

最后，我使用HTML

img

标记在我的页面上嵌入图像，并在下载最后一幅图像时使用jQuery触发打印对话框。

制作一个打印样式表，将span设置为显示：block

打印前需要延迟。chrome中有一个本地bug。守则如下：-

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}

---

只需添加以下样式就可以了{max-width:100%；height:auto；}

---

导致问题的原因是打印时图像的宽度设置为0。

结果显示，在我的情况下，图像没有显示，因为浏览器默认设置为不打印背景图像。这可以在某些浏览器中手动设置，但并非所有浏览器都可以。解决方案是使用HTMLIMG标记。这些图像不打印，因为它们是背景图像，浏览器设置为不打印这些图像。这可以在某些浏览器中手动更改。解决方案是使用HTMLIMG标记而不是span。

<li class="media">
    <div class="img">
        <div class="h6">
            <strong>Spouse</strong></div>
            <img src="image.gif" alt="" class="person-thumb dropshadow" />
        </div>
    <div class="bd">
        <p class="mbn">Husband</p>
        <h3 class="profile-subtitle">
            <a href="path">Thomas&nbsp;<strong>Name</strong></a>
        </h3>
        <p class="mbn">?&#45;?</p>
    </div>
</li>

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}