IE (7?) Искажает фон от спрайтов? - PullRequest
7 голосов
/ 04 февраля 2011

Я вытаскиваю свои волосы на этом.

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

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

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

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

Есть идеи?

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

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

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

1 Ответ

5 голосов
/ 09 февраля 2011

Оказывается, моя проблема была вызвана функцией IE "zoom".Без увеличения все выглядит отлично, как и в других браузерах.Даже 150% или 200% выглядит хорошо.Но 125%, где у меня было, вызывает это искажение.Это происходит в IE7 и IE8.

...