1

何らかの理由で、私のライブWebサイトの（スプライトシートからの）画像は、ローカルバージョンとは異なる位置に配置されています。それは私を夢中にさせます！要素を調べると、ライブ時にスプライトシートのスケーリングがわずかに異なっているようです。これにより、画像が必要以上に右にシフトしています。なぜ何かアイデアはありますか？

よろしくお願いします！

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%;}

ローカルウェブサイト

ライブウェブサイト

4

3 に答える 3

3

投稿した行よりも少し多くのCSSが使用されています...skeleton.css例：また、％で幅も使用しています...それが理由だと思います。

于 2013-03-11T21:59:46.730 に答える
3

クラスの.icon幅は20％で.parallelogram、画面のポケットよりも広くなっています。ポケットのスケーリングはアイコンのスケーリングと同期している必要があります...そうでない場合、ポケットはアイコンと比較して小さすぎるか、中心から外れます。

編集：これが試してみるためのjsfiddleです：http：//jsfiddle.net/adnrz/ある 時点でメディアクエリを使用して、ポケットを拡大縮小しますが、アイコンは拡大縮小しないため、ポケットは横にドラッグされます。また、最も小さい画面サイズでは、アイコンを適切な場所で切り取らないため、2つのハーフアイコンが表示されます。

于 2013-03-11T22:02:15.863 に答える
3

ポケットとアイコンの両方をに配置します

position: absolute;
left: 50%;

と追加

margin-left: -HALF_THEIR_WIDTH;

私は垂直位置でも同じことをします（私はあなたが上記の読み方を知っていると思います）

私があなたのウェブページで見たものから、あなたは固定ピクセル値とパーセンテージを悪い方法で混ぜています。

幸運を。

于 2013-03-11T22:28:10.120 に答える