Html Chrome通过垂直拉伸打印CSS精灵

我试图用一个拥有“奖项”（金、银、铜）的图像精灵来布置一个页面。它实际上正在工作，除了在Chrome中的打印预览。在Firefox/IE中，它看起来很好，但Chrome所做的是，背景图像开始正确（即背景位置正常），但图像的其余部分延伸到下一个元素的开始。有关屏幕截图，请参阅

以下是HTML和相关CSS的一个片段：

<span class="price">$22.15
    <br />
    <span class="awards-section">
    <span class="award gold">S.O.E.I.W.F</span>
    <span class="award silver">F.L.I.W.C</span>
    <span class="award silver">A.C.W.C</span>
    <span class="award bronze">F.L.I.W.C</span>
    <br />
    </span>
</span>

.awards-section {
    margin-top: -0.3em;
    display: block;
    font-size: 4mm;
    font-weight: normal;
}
.award {
    background-image: url('/images/general/awards.png');
    width: 60px;
    height: 25px;
    display: inline-block;
    padding-left: 62px;
    margin: 1px;
    background-repeat: no-repeat;
    line-height: 25px;
    float: left;
    clear: both;
}
.gold { background-position: 0 0; }
.silver { background-position: 0 -25px; }
.bronze { background-position: 0 -50px; }
.double-gold { background-position: 0 -75px; }
.double-silver { background-position: 0 -100px; }
.double-bronze { background-position: 0 -125px; }

22.15美元


S.O.E.I.W.F
F.L.I.W.C
A.C.W.C
F.L.I.W.C


.奖项组{
边缘顶部：-0.3em；
显示：块；
字号：4mm；
字体大小：正常；
}
.奖励{
背景图片：url（'/images/general/awards.png'）；
宽度：60px；
高度：25px；
显示：内联块；
左侧填充：62px；
保证金：1px；
背景重复：无重复；
线高：25px；
浮动：左；
明确：两者皆有；
}
.gold{背景位置：0；}
.silver{背景位置：0-25px；}
.brown{背景位置：0-50px；}
.double gold{背景位置：0-75px；}
.双银{背景位置：0-100px；}
.双青铜{背景位置：0-125px；}

我也遇到了这个问题。我发现的唯一解决方法是切换到使用img标记裁剪器方法，而不是背景图像方法

方法如下所示

---

我不知道chrome在做什么，但我认为它正在抓取背景图像尺寸并以该尺寸显示，但使用div尺寸裁剪图像。如果我是对的，这真的很奇怪。

我也遇到了这个问题。我发现的唯一解决方法是切换到使用img标记裁剪器方法，而不是背景图像方法

方法如下所示

---

我不知道chrome在做什么，但我认为它正在抓取背景图像尺寸并以该尺寸显示，但使用div尺寸裁剪图像。如果我是对的，这真的很奇怪。

上游错误在chrome 26中得到解决

---

chrome 26解决了上游缺陷

---

可能是打印预览中的错误。打印正常还是看起来像打印预览？打印时问题仍然存在。可能是打印预览中的错误。打印正常吗？还是看起来像打印预览？打印时问题仍然存在。