Chrome打印垂直拉伸的CSS Sprites

我试图展示一个页面，其中包含一个包含“奖项”（金，银，铜）的图像精灵。这实际上是工作，除了Chrome中的打印预览。在Firefox/IE中，它看起来很好，但Chrome做的是，背景图像开始正确（即背景位置有效），但图像的其余部分延伸到下一个元素的开始处。有关屏幕截图，请参阅this url。Chrome打印垂直拉伸的CSS Sprites

下面是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; }

来源

2012-08-08 JakeTheSnake

解决可能在打印预览中的错误。它打印好还是看起来就像打印预览一样？ – Samuel 2012-08-08 15:53:05

打印时问题仍然存在。 – JakeTheSnake 2012-08-08 15:55:04