我想在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
我已經更新了細節 –