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