IE (7?) Искажает фон из спрайтов ?

Я рву за волосы на этом.

Мы почти закончили разработку новой версии нашего сайта. В качестве последнего шага мы пытаемся обернуть все глифы и значки в спрайт. Все они прозрачные .png, так что и спрайт тоже. Похоже, что если фон исходит от sptire, IE искажает его. Если это происходит из исходного файла, это не так. FF и Chrome в любом случае хороши.

Я смотрю на исходное изображение и спрайт-версию бок о бок с сетками, чтобы убедиться, что пиксели идентичны. Я много раз считал пиксели в спрайте, чтобы убедиться, что использую правильные координаты. Мой CSS выглядит так:

XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;

«XX» позволяет мне переключаться вперед и назад. С однофайловой версией все выглядит идеально: . Спрайт-версия выглядит так: . Похоже, он "сплющен" как по вертикали, так и по горизонтали. Этого не происходит в FF или Chrome.

Есть идеи?

РЕДАКТИРОВАТЬ Мне удалось убрать большую часть шума и опубликовать пример здесь . Я добавил примечания к примеру, чтобы описать мою проблему.

Большое спасибо за то, что нашли время, чтобы взглянуть на это!

ОБНОВЛЕНИЕ С тех пор мы заменили эти «перекрывающиеся изображения разделителей» псевдо-CSS -классы, которые ДЕЙСТВИТЕЛЬНО накладываются друг на друга, и проблема масштабирования, похоже, исчезла. Конечно, теперь у нас есть новые проблемы - IE8 неправильно понимает z-порядок, а IE7 вообще не понимает псевдоэлементы. Но, по крайней мере, разметка стала проще, и проблема масштабирования исчезла.