IE8 background-position on: зависать не перемещая файл

Question

Я использую метод background-position для изменения изображения при наведении на него курсора. Это хорошо работает для меня в FF, Chrome и Safari, но не в IE8. Фоновое изображение представляет собой файл .png с альфа-прозрачностью. Я провёл свой код через валидатор W3C, и он действителен, поэтому я не должен переходить в режим совместимости.

Вот соответствующий фрагмент HTML-кода:

<div id="main-nav">
<div id="texas">
  <a href="texas.html"><span>texas</span></a>
  <h2>texas</h2>
</div>
<div id="washington">
  <a href="washington.html"><span>washington</span></a> 
  <h2>washington</h2>
</div>
</div>

и соответствующие css:

#main-nav {
  width: 844px;
  height: 400px;
  margin: 40px auto; 
  position: relative;
}

#texas, #washington { 
  position: absolute; 
  height: 500px; 
  width: 196px;
}

#texas a {
  background-image: url("pics/texas.png"); 
}

#washington a {
  background-image: url("pics/washington.png");
}

#texas a, #washington a { 
  height: 400px; 
  width: 196px;
  display: block;
}

#texas a:hover, #washington a:hover { 
  background-position: 196 0; 
}

Помощь

Answer 1

У меня была похожая проблема, когда не работали ролловеры css с background-position изменением при наведении, только в IE8.Они были очень спорадическими - иногда один переключался, но затем некоторое время оставался в состоянии зависания, пока другой в конечном итоге не сработал.

Я обнаружил, что, удалив любые фильтры прозрачности, специфичные для IE filter: alpha(opacity=100); из css любого из родительских элементов элемента, проблема была решена.

Answer 2

#texas a:hover, #washington a:hover { 
  background-position: 196px 0; 
}

Добавьте значение px к вашему 196. В противном случае .png прозрачность не работает только в IE6 и может быть решена с помощью этого: http://www.twinhelix.com/css/iepngfix/

Answer 3

Вот несколько страниц, на которых обсуждаются проблемы с png в ie8

http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html

http://www.vistaheads.com/forums/microsoft-public-internetexplorer-general/433700-problem-alpha-transparent-png-ie8.html

Как решить / взломать полупрозрачную ошибку PNG в IE8?