Проблемные места в IE

В некоторых версиях 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) {}

В данном случае мы форсируем кэширование фоновых изображений, что предотвращает описанную выше ошибку.