CSS 在 IE/Chrome/Firefox 中打印预览（或打印）时不显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12517577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images not displaying when Print Preview (Or Print) in IE/Chrome/Firefox
提问by IntoTheBlue
I'm Web Developer and almost never work with design but have been given this bug which I'm struggling to rectify.
我是 Web 开发人员，几乎从不从事设计工作，但遇到了这个我正在努力纠正的错误。
Some images appear correctly when I print/display the print preview page, however others don't. The key difference that I can see is that the images that don't appear are span tags with the image applied in css whilst the working images use the img tag.
当我打印/显示打印预览页面时，有些图像显示正确，但其他图像则没有。我可以看到的主要区别是，没有出现的图像是跨度标签，图像应用在 css 中，而工作图像使用 img 标签。
Here are examples of the html:
以下是 html 的示例：
Span with "icon" birth does notdisplay:
带有“图标”出生的跨度不显示：
<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 doesdisplay:
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 <strong>Name</strong></a>
</h3>
<p class="mbn">?-?</p>
</div>
</li>
In some browsers it looks ok in the preview but does not print, in others it doesn't and still does not print.
在某些浏览器中，它在预览中看起来不错，但无法打印，而在其他浏览器中，它没有并且仍然无法打印。
Thankyou in advance!
先感谢您！
回答by DaveTsunami
I had the same problem over two months ago. I had a button that redirected users to a printer-friendly page and then I triggered print dialog using Javascript.
两个月前我遇到了同样的问题。我有一个按钮将用户重定向到一个打印机友好的页面，然后我使用 Javascript 触发打印对话框。
The problem was that browsers did not wait till images specified in CSS background were downloaded.
问题是浏览器没有等到 CSS 背景中指定的图像被下载。
I put timeout before triggering the print dialog to give browser time to download images. This approach is not reliable since nobody has constant download speed and it would open the print dialog before the images are downloaded to users with very slow Internet connection.
我在触发打印对话框之前设置超时，让浏览器有时间下载图像。这种方法并不可靠，因为没有人具有恒定的下载速度，并且它会在将图像下载给 Internet 连接非常慢的用户之前打开打印对话框。
In the end, I used HTML imgtags to embed images on my page and jQuery to trigger the print dialog when the last image is downloaded.
最后，我使用 HTMLimg标签在我的页面上嵌入图像，并使用 jQuery 在下载最后一个图像时触发打印对话框。
回答by Anand Deep Singh
You need to put delay before print. There is a native bug in chrome. Code would as under :-
您需要在打印前设置延迟。chrome 中有一个本机错误。代码如下：-
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;
}
回答by Venkatesh Gaurav
Just add the below styles to make it work img{max-width:100%;height:auto;}
只需添加以下样式即可使其工作 img{max-width:100%;height:auto;}
Its the width of the image being set to 0 in the print which is causing the issue.
它的图像宽度在打印中设置为 0，这是导致问题的原因。
回答by albert
make a print stylesheet, set your span to display:block
制作一个打印样式表，将您的跨度设置为 display:block
