2017-02-28 57 views
0

我想在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中工作正常。 所以我们决定,如果打印时他们想要更好的布局,我们可能会将用户引用到不同的浏览器。感谢大家的帮助。

+0

你做了什么。将你的代码添加到问题中。 –

+0

如果您希望图像可打印,则需要在''标签中。有关更多信息,请参阅此答案:http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1。根据这个答案,你也可以使用'backgroung-image'属性。 – zik

+0

我已经更新了细节 –

回答

0

我试图解决我的一些问题,所以我想我会在这里添加答案,因为没有人与任何其他人一起。


经过一些调试后,事实证明,IE11(也可能是其他IE浏览器)在打印时无法显示我们的精灵文件中的所有图像。我们已经确定,它可能是IE浏览器特定的错误,因为它在Chrome和Firefox中工作正常。