Html 如何使IE在打印时显示所有背景图像?

Html 如何使IE在打印时显示所有背景图像?,html,css,internet-explorer,printing,Html,Css,Internet Explorer,Printing,我正在尝试为IE中的打印设置页面样式。当我在页面设置中勾选“打印背景和图像”选项,然后查看页面预览时,只显示一些图标。但所有图标的样式都完全相同 唯一有意义的是它们来自一个精灵。但它与正常的风格 有没有人知道哪里出了问题,或者给我指出了一个有用的方向 谢谢大家 更新:不知道是否有帮助,但下面是图标的样式和html 一般风格: base-webkit-t-da.css:6098 i.px24 { font-size: 24px; } base-webkit-t-da.css:5664 i

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

唯一有意义的是它们来自一个精灵。但它与正常的风格

有没有人知道哪里出了问题,或者给我指出了一个有用的方向

谢谢大家

更新:不知道是否有帮助,但下面是图标的样式和html

一般风格:

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特有的bug,因为它在chrome和firefox中运行良好。
因此,我们决定,如果用户在打印时想要更好的布局,我们可能会让他们使用不同的浏览器。谢谢大家的帮助。

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



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

你做了什么。将你的代码添加到问题中。如果你想让你的图像可以打印,它们需要在
标签中。有关更多信息,请参见此处的答案:。根据这个答案,你也可以使用
backgroundimage
属性。我已经更新了详细信息
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;
}