IE8 background-position on: hover not moving file

Question

Я использую метод фонового положения для изменения изображения, когда я наводил на него курсор. Это отлично работает для меня в 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

Вот некоторые страницы обсуждают проблемы с 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

How to solve/hack fading semi-transparent PNG bug in IE8?

Answer 2

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

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

Answer 3

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

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