我想在IE中打印一个页面进行打印。当我在页面设置中勾选“打印背景和图像”选项,然后查看页面预览时,只显示一些图标。但所有图标都具有完全相同的样式。如何让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浏览器)简单地着展现在我们的精灵文件中的所有图像打印时。我们已经确定,它可能是IE浏览器特定的错误,因为它在Chrome和Firefox中工作正常。 所以我们决定,如果打印时他们想要更好的布局,我们可能会将用户引用到不同的浏览器。感谢大家的帮助。
你做了什么。将你的代码添加到问题中。 –
如果您希望图像可打印,则需要在''标签中。有关更多信息,请参阅此答案:http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1。根据这个答案,你也可以使用'backgroung-image'属性。 – zik
我已经更新了细节 –