Я вытаскиваю свои волосы на этом.
Мы почти закончили с капитальным ремонтом нашего сайта. В качестве последнего шага мы пытаемся объединить все глифы и значки в спрайт. Они все прозрачные .png, так что спрайт тоже. Похоже, что если фон происходит от спирита, IE искажает его. Если это происходит из исходного файла, это не так. FF и Chrome хороши в любом случае.
Я смотрю на оригинальное изображение и ускоренную версию рядом с сетками, чтобы увидеть, что пиксели идентичны. Я посчитал пиксели в спрайте много раз, чтобы убедиться, что я использую правильные координаты. Мой CSS выглядит так:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
«ХХ» позволяет мне переключаться вперед и назад. С однофайловой версией это выглядит идеально: . Спрайт-версия выглядит так: . Похоже, что он «сдавлен» как вертикально, так и горизонтально. Этого не происходит в FF или Chrome.
Есть идеи?
РЕДАКТИРОВАТЬ Мне удалось убрать большую часть шума и опубликовать пример здесь . Я добавил примечания к примеру, чтобы описать мою проблему.
Большое спасибо, что нашли время посмотреть на это!
ОБНОВЛЕНИЕ С тех пор мы заменили эти «перекрывающиеся разделительные изображения» псевдоклассами CSS, которые ДЕЙСТВИТЕЛЬНО перекрываются, и проблема масштабирования, похоже, исчезла. Конечно, теперь у нас есть новые проблемы - IE8 неправильно понимает z-порядок, а IE7 вообще не понимает псевдоэлементы. Но, по крайней мере, разметка проще и проблема с масштабированием исчезла.