css – 在IE / Chrome / Firefox中打印预览(或打印)时不显示图像

前端之家收集整理的这篇文章主要介绍了css – 在IE / Chrome / Firefox中打印预览(或打印)时不显示图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Web开发人员,几乎从不使用设计但是已经给出了这个我正在努力纠正的错误.

打印/显示打印预览页面时,某些图像显示正确,但其他图像则不然.我可以看到的关键区别是,未出现的图像是跨度标签,图像在css中应用,而工作图像使用img标签.

以下是html的示例:

带有“icon”诞生的跨度不显示

<li class="media">
    <div class="img">
        <div class="h2 mtm">1889</div>
        <span class="timeline-icon icon-birth"></span>
    </div>
    <div class="bd">
        <h3 class="profile-subtitle mts">Born in ?</h3>
        <p class="deemphasis mbn">
        <a href="/search/results/bmdindexedbirths/bibby/elizabeth%20?yearofbirth=1889">Search     for Birth Record</a>
        </p>
    </div>
</li>

Image.gif确实显示

<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>

在某些浏览器中,它在预览中看起来没问题,但是没有打印,在其他浏览器中它没有打印,但仍然无法打印.

先感谢您!

解决方法

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

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

我在触发打印对话框之前设置了超时,以便为浏览器提供下载图像的时间.这种方法不可靠,因为没有人具有恒定的下载速度,并且在将图像下载到具有非常慢的因特网连接的用户之前它将打开打印对话框.

最后,我使用HTML img标签在我的页面上嵌入图像,并使用jQuery在下载最后一个图像时触发打印对话框.

猜你在找的CSS相关文章