Question

我正在尝试在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特定的bug，因为它在chrome和firefox中工作正常。所以我们决定如果他们想要在打印时更好的布局，我们可能只会将用户引荐到不同的浏览器。谢谢大家的帮助。

Answer 1

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

经过一些调试后，发现IE11（可能还有其他IE浏览器）在打印时根本无法显示我们的精灵文件中的所有图像。我们已经确定它可能是IE特定的bug，因为它在chrome和firefox中工作正常。

如何在打印时让IE显示所有背景图像？

1 个答案: