Spritesheet PNG顯示在網站上的不同位置

Question

出於某種原因，我的實時網站上的圖像（來自精靈表）與本地版本的位置不同。這讓我瘋狂！在檢查元素時，它看起來spritesheet在縮放時略有不同，這會使圖像比我想要的更靠右。任何想法爲什麼？

非常感謝提前！

的HTML：

<div id="icon-container"> 
<div class="icon"> 
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s2" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s3" alt="" src="images/assets/spritesheet.png"> 
    </a>  
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s4" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s5" alt="" src="images/assets/spritesheet.png"> 
    </a>  
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s6" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s7" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s8" alt="" src="images/assets/spritesheet.png"> 
    </a>  
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s9" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s10" alt="" src="images/assets/spritesheet.png"> 
    </a>   
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s11" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s12" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s13" alt="" src="images/assets/spritesheet.png"> 
    </a>  
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s14" alt="" src="images/assets/spritesheet.png"> 
    </a>    
    <a class="stretchy"> 
        <img class="spacer" alt="icon" src="images/assets/spacer.png"> 
        <img class="sprite s15" alt="" src="images/assets/spritesheet.png"> 
    </a>    
</div> 
</div>    

的CSS：

.stretchy {display:block; position:relative; overflow:hidden; max-width:400px; } 

.stretchy .spacer { width: 100%; height: auto; } 
.stretchy .sprite { 
    position:absolute; top:-5px; left:0; max-width:none; max-height:100%; 
} 
.stretch img { width: 100%; } 

.stretchy .sprite.s2 {left:-103%;} 
.stretchy .sprite.s3 {left:-205%;} 
.stretchy .sprite.s4 {left:-307%;} 
.stretchy .sprite.s5 {left:-407%;} 
.stretchy .sprite.s6 {left:-508%;} 
.stretchy .sprite.s7 {left:-608%;} 
.stretchy .sprite.s8 {left:-709%;} 
.stretchy .sprite.s9 {left:-811%;} 
.stretchy .sprite.s10 {left:-911%;} 
.stretchy .sprite.s11 {left:-1012%;} 
.stretchy .sprite.s12 {left:-1113%;} 
.stretchy .sprite.s13 {left:-1216%;} 
.stretchy .sprite.s14 {left:-1318%;} 
.stretchy .sprite.s15 {left:-1418%;} 

Answer 1

.icon類的寬度爲20％，比我的屏幕上的口袋.parallelogram寬。口袋的縮放比例應與圖標縮放同步，否則與圖標相比，口袋將太小或偏離中心。

編輯：這裏是嘗試東東的jsfiddle：在某些時候你縮放口袋而不是圖標了，因此口袋被draged到一邊http://jsfiddle.net/adnrz/ 隨着媒體查詢。在屏幕尺寸最小的情況下，您不會將圖標放在正確的位置，因此您會顯示兩個半圖標。

Answer 2

有比你張貼的線路上使用多一點點的CSS ...骨架.css例如 在那裏你也使用寬度與％...猜猜這就是原因。

Answer 3

我都定位在口袋裏，在

position: absolute; 
left: 50%; 

的圖標，並添加

margin-left: -HALF_THEIR_WIDTH; 

我會做同樣的垂直定位（我猜你應該知道怎麼以上閱讀）

從我在您的網頁上看到的您正在以不良方式將百分比固定的像素值進行混合。

祝你好運。