Sto tirando i miei capelli su questo.IE (7?) Distorce gli sfondi dagli sprite?
Abbiamo quasi finito con lo sviluppo di una revisione del nostro sito. Come ultimo passo, stiamo cercando di racchiudere tutti glifi e icone in uno sprite. Sono tutti trasparenti .png così lo è anche lo sprite. Sembra che se uno sfondo proviene da uno sptire, IE lo distorce. Se proviene dal file originale, non lo è. FF e Chrome vanno bene in ogni caso.
Sto osservando l'immagine originale e la versione ripetuta con le griglie per vedere che i pixel sono identici. Ho contato i pixel nello sprite molte volte per assicurarmi che io stia usando le coordinate giuste. Il mio file CSS è il seguente:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
Il 'XX' mi consente di passare avanti e indietro. Con la versione a file singolo, sembra perfetto: . La versione sprite assomiglia a questa: 
. Sembra che sia "schiacciato" sia verticalmente che orizzontalmente. Questo non succede in FF o Chrome.
Qualche idea?
EDIT ho potuto mettere a nudo la maggior parte del rumore e inviare un esempio here. Ho aggiunto note all'esempio per descrivere il mio problema.
Grazie mille per aver dedicato del tempo a guardare questo!
AGGIORNAMENTO Abbiamo dato sostituito queste 'immagini sovrapposte divisore' con i CSS pseudo-classi che realmente si sovrappongono e la questione zoom sembra essere andato via. Naturalmente ora abbiamo nuovi problemi - IE8 ha sbagliato lo z-order e IE7 non capisce affatto gli psuedo-elementi. Ma almeno il markup è più semplice e il problema dello zoom è sparito.
Per me, sembra meno "schiacciato" e più simile a un offset di un pixel lungo entrambi gli assi. Avere un x-offset a pixel zero non è d'accordo, ma probabilmente vale la pena ricontrollare la matematica dello sprite, se non lo hai già fatto. –
@ Ben: Questo è un ottimo suggerimento e ci siamo innamorati dei numeri. Quando spostiamo la Y su o giù 1px, vediamo chiaramente una linea nera orizzontale in alto o in basso che ci aspetteremmo dall'assenza dell'immagine. In questo caso la distorsione appare anche "sub-pixel" se è possibile! – n8wrl
Riesci a ottenere un esempio funzionante che mostri il problema, da qualche parte come jsfiddle.net, ad esempio? È strano; sembra che qualcosa aggiunga un effetto smussato in qualche modo. –