크롬이 CSS 스프라이트를 세로로 늘인다.

나는 "상"(금,은, 청동)이 들어있는 이미지 스프라이트가있는 페이지를 배치하려고한다. Chrome에서 인쇄 미리보기를 제외하고 실제로 작동 중입니다. Firefox/IE에서는 괜찮은 것처럼 보이지만 Chrome이하는 일은 백그라운드 이미지가 올바르게 시작되지만 백그라운드 이미지가 다음 요소의 시작 부분으로 늘어나는 것입니다. 스크린 샷은 this url을 참조하십시오. 나뿐만 아니라이 문제에 실행 한크롬이 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

인쇄 중에도 문제가 지속됩니다. – JakeTheSnake