html - 如何让 IE 在打印时显示所有背景图像？

Question

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

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

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

谢谢大家

更新: 不知道是否有帮助，但这是与图标一起使用的样式和 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>

风格:

每个图标都会覆盖位置，以便显示来自 sprite 的正确图像:

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 中运行良好。所以我们决定，如果用户在打印时想要更好的布局，我们可能只是将用户推荐给不同的浏览器。谢谢大家的帮助。

Answer 1

我试图解决我的一些问题，所以我想我应该在此处添加答案，因为没有其他人提供任何答案。

---

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