Проблемные места в 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) {}

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