В некоторых версиях IE изменение расположения фона при наведении мыши отрабатывает не совсем корректно, и браузер запрашивает исходную фоновую картинку с сервера еще раз, что вызывает «мигание» картинки. Одним из вариантов борьбы с такой проблемой может стать изменение не позиции фонового элемента, а его прозрачности. Например, мы можем сразу задать параметры фона для элемента и его прямого потомка, а при наведении мыши менять фон дочернего элемента на прозрачный, тогда фон родителя будет просто просвечивать:
<a href="/"><span>Начало</span></a> a { background: yellow url(http://site.ru/img/button.png) 0 0 no-repeat; display: block; height: 20px; width: 100px; } a span { background: red url(http://site.ru/img/button.png) -100px 0 no-repeat; display: block; height: 20px; width: 100px; } a:hover span { background: transparent; }
К сожалению, этот метод предполагает появление у элемента несемантического потомка для обеспечения графических эффектов. Более стандартным вариантом будет вызов специфичного для IE метода backgroundImageCache
(через try
или любое другое условие, гарантирующее обратную совместимость с остальными браузерами):
try { document.execCommand("BackgroundImageCache", false, true); } catch (e) {}
В данном случае мы форсируем кэширование фоновых изображений, что предотвращает описанную выше ошибку.