Ролловер CSS на основе спрайтов мигает в IE6

Question

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

CSS

#welcome #step1 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;}
#welcome #step1:hover 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;}

HTML

<div id="welcome">
<a class="steps" id="step1" href="?page=signup"></a>
...
</div>

Естественно, IE6 испортил эту простую вещь. Все мои ролловеры мигают.

При наведении мыши на изображение исчезает на мгновение, а затем переходит в состояние наложения. Интересно, что если я уйду со страницы и нажму кнопку НАЗАД, проблема, похоже, исчезнет!

Я думаю, что это связано с файлами изображений PNG (хотя они не имеют никакой прозрачности) Или, возможно, чем-то простым, например, типом документа (XHTML переходный)

Спасибо за понимание.

РЕДАКТИРОВАТЬ ( РЕШЕНО ):

Jitendra предоставил ссылку для решения проблемы. Я просто добавил это в голову:

<!--[if IE 6]>
<style type="text/css" >

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
</style>
<![endif]-->

Answer 1

Браузер запрашивает изображение с сервера для каждого правила CSS, в котором вы указываете свойство url(). Чтобы это исправить, просто объедините часть background ваших двух правил в одно правило и установите свойство background-position для каждого состояния спрайта css.

#step1, #step1:hover {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll;
}
#step1 {
    background-position: left top;
}
#step1:hover {
    background-position: right top;
}

Эта проблема действительно возникает во многих браузерах. Это просто более заметно в IE6.

В качестве примечания: если вы используете идентификаторы, указывать два идентификатора в селекторе не нужно. Идентификаторы должны быть уникальными для страницы.

Answer 2

См. Эти решения-

http://ajaxian.com/archives/no-more-ie6-background-flicker

http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html

Answer 3

В этой статье обсуждаются триггеры этой проблемы и некоторые другие решения: http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

Кроме того, CSS, чтобы исправить это, как предусмотрено Габриэлем, может быть улучшено до:

#step1 {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#step1:hover {
    background-position: right top;
}

Answer 4

У меня больше нет IE6 для тестирования, но вы проверили, чтобы убедиться, что изображение полностью кэшируется клиентом? У него должен быть явный HTTP-заголовок Expires или Cache-Control: max-age.

Answer 5

Похоже на типичный случай 'мерцания IE6', который вызван настройкой в ​​IE6. Браузер повторно запрашивает изображение с сервера при наведении ... Глупо, верно? Вы пробовали двойную буферизацию изображения? Под этим я подразумеваю размещение одного и того же фонового изображения как на родительском элементе, так и на самой ссылке. Пример ниже:

#welcome {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1 {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1:hover {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;
}

Дайте мне знать, как вы поживаете:)

Answer 6

для удовольствия, что произойдет, если ваш: hover style указывает только

 {background-position: right top;}