打印时如何让IE显示所有背景图片？答案

【问题标题】：How do I make IE show all background images when printing?打印时如何让IE显示所有背景图片？
【发布时间】：2017-02-28 10:22:51
【问题描述】：

我正在尝试为在 IE 中打印的页面设置样式。当我在页面设置中勾选“打印背景和图像”选项，然后查看页面预览时，只显示一些图标。但所有图标的样式完全相同。

它们唯一重要的是它们来自一个精灵。但它适用于普通样式。

有没有人知道可能出了什么问题或为我指明了一个有用的方向？ :)

谢谢大家。

更新： 不知道它是否有帮助，但这是与图标一起使用的样式和 html

<td style="height: 200px;">
  <i class="icon1 px24" title="icon"></i> 
  <i class="icon2 px24" title="icon"></i>
  <i class="icon3 px24" title="icon"></i> 
  <i class="icon4 px24" title="icon"></i>
</td>

和风格：

每个图标都会覆盖位置，以便从精灵中显示正确的图像：

base-webkit-t-da.css:6062
i.icon1 {
    background-position: -12em -8em;
}

一般风格：

base-webkit-t-da.css:6098
i.px24 {
    font-size: 24px;
}

base-webkit-t-da.css:5664
i {
    color: rgba(0, 0, 0, 0);
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    text-indent: 10em;
    width: 1em;
    height: 1em;
    font-size: 16px;
    background-image: url(http://domain.o/img/domain/icons/icons.svg?v=(16.4%s);
    background-repeat: no-repeat;
    background-size: 20em;
    background-position: -1em;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    padding: 0!important;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
media="print"
base_print-webk…-da.css:7
* {
    box-shadow: none!important;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
user agent stylesheet
i, cite, em, var, address, dfn {
    font-style: italic;
}
Inherited from td
base-webkit-t-da.css:1569
table.list td, table.grid td, table.list th, table.grid th {
    padding: 2px 0.5em;
    text-align: left;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from tr
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from tbody
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from table.list.canSort.isSorted
base-webkit-t-da.css:1535
table.list, table.grid {
    width: 100%;
    margin: 0 0 2em 0;
    line-height: 1.7em;
}
base-webkit-t-da.css:1318
p, ul, table {
    margin: .5em 0;
    line-height: 1.7em;
}
base-webkit-t-da.css:71
table {
    border: 0;
    border-collapse: collapse;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
user agent stylesheet
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from article.meetingAnalysis
base-webkit-tea…r-da.css:10454
body article {
    font-size: 1em;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from article.meeting
base-webkit-tea…r-da.css:10454
body article {
    font-size: 1em;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div#container
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from main#frame
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from div#pagewrapper.meetings.public
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from body.t.loggedIn.scaleToTablet.hasFreshdeskChat
media="print"
base_print-webk…t-da.css:10
body {
    background: transparent none;
    font-size: .7em;
}
base-webkit-t-da.css:48
body {
    font-size: .75em;
    font-family: 'Proxima-Nova', Helvetica, Verdana, sans-serif;
    color: #333333;
    padding: 0;
    z-index: 0;
}
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
Inherited from html.wf-proximanova-n7-active.wf-proximanova-i7-active.wf-proximanova-n4-active.wf-proximanova-i4-active.wf-active.lc-cb-container-vi
base-webkit-t-da.css:43
* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

更新：所以经过一些调试，事实证明 IE11（可能还有其他 IE 浏览器）在打印时根本无法显示我们的 sprite 文件中的所有图像。我们已经确定它可能是 IE 特定的错误，因为它在 chrome 和 firefox 中运行良好。因此，我们决定如果用户在打印时想要更好的布局，我们可能只会将他们推荐给不同的浏览器。谢谢大家的帮助。

【问题讨论】：

你做了什么。将你的代码添加到问题中。
如果您希望您的图像可打印，它们需要位于<img> 标签中。请在此处查看此答案以获取更多信息：stackoverflow.com/questions/492809/…。根据该答案，您还可以使用backgroung-image 属性。
我已经更新了详细信息

标签： html css internet-explorer printing

【解决方案1】：

我正在尝试解决我的一些问题，所以我想我会在这里添加答案，因为没有其他人提供任何答案。

经过一些调试，事实证明 IE11（可能还有其他 IE 浏览器）在打印时根本无法显示我们的 sprite 文件中的所有图像。我们已经确定它可能是 IE 特定的错误，因为它在 chrome 和 firefox 中运行良好。

【讨论】：