2017-02-28 60 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中工作正常。