Проблема с CSS: a: зависание не работает с IE (требуется css Ninja)

Почему IE не меняет цвет фона на моем сайте для вкладок a: hover, но делает это в Firefox/Chrome/Safari правильно?

Что я могу сделать, чтобы он работал в IE 6 +?

HTML

<ul class="tabbernav">
<li class="tabberactive"><a title="All" href="javascript:void(null);">All</a></li>
<li class=""><a>Tab1<span class="tabTotal"> (0)</span></a></li>
<li class=""><a>Tab2<span class="tabTotal"> (2)</span></a></li>
<li class=""><a>Tab3<span class="tabTotal"> (1)</span></a></li>
</ul>

CSS

ul.tabbernav li a:hover {background:#fdfdfd; border: 1px solid #555; border-bottom: none; color:#3366a9; cursor: pointer}

Ответы

Ответ 1

Первое, что я хотел бы сделать, это проверить, правильно ли выбран порядок селекторов psuedo.

Должно быть -

a:link {color:#FF0000} /* unvisited link */  
a:visited {color:#00FF00} /* visited link */  
a:hover {color:#FF00FF} /* mouse over link */  
a:active {color:#0000FF} /* selected link */

Единственная конкретная проблема IE-hover, которую я помню, связана с элементами без ссылок, поэтому я не думаю, что это ваша проблема. http://www.bernzilla.com/item.php?id=762 - на всякий случай.

Если это не отвечает на ваш вопрос, не возражаете ли вы опубликовать связанный блок css?

GAH- Это было тяжело!

Похоже, что IE ломается, потому что ссылки не имеют связанного с ним элемента HREF. Исправьте это, и все будет хорошо.

- Ломающие новости - я, возможно, идиот. Это последнее, что я изменил на своей тестовой странице, и это исправило это, но когда я все собрал, он повредил везде... так что возьмите то, что я только что написал с помощью зерно соли. Я поддерживаю, чтобы узнать, что произошло.

Ответ 2

Вы должны поместить атрибут href="" в тег <a>.

Это будет нормально работать.

Также используйте тег <!doctype html> в верхней части страницы. Теперь все будет хорошо.

Ответ 3

Это такое простое решение! Используйте background-color: #fffffe при смене фона: #fff на background: #fff не работает.

http://haslayout.net/css/Hover-White-Background-Ignore-Bug

Ответ 4

Добавьте тег удара в <head> для исправления.

для IE9

<meta http-equiv="X-UA-Compatible" content="IE=9">

для IE10

<meta http-equiv="X-UA-Compatible" content="IE=10">

Ответ 5

Я думаю, что IE 7 исправил проблему наведения на элементах, отличных от <a>, но не протестировал.

Чтобы восполнить IE 6 отсутствие поддержки: селектора hover, вам просто нужно использовать javascript для получения того же эффекта. Установите событие onMouseOver, которое применяет класс, который вы хотите.: D

Ответ 6

Ваш CSS выглядит действительным.

Попробуйте добавить "! important" к вашему: hover, а также попробовать изменить другие стили в определении. Возможно, у вас есть другой стиль, переопределяющий этот стиль: стиль наведения с помощью каскада.

Firebug в FF может показать вам некоторые конфликтующие стили, наследуемые (хотя в IE6 вы сами по себе), но вы должны убедиться, что вы не конфликтуете. a: hover отлично работает в IE6, так как вы и другие в вопросе - это aweare of

Кроме того, поставьте точки с запятой и символы новой строки после того, как ваши объявления будут грязными языками!

Ответ 7

Я получаю ошибку javascript (значение Invalid property Value) в IE в строке ~ 852:

document.getElementById('panel-hlisting-all').style.backgroundColor = color;

где цвет имеет значение "# ffff100".

Может ли это быть причиной вашей проблемы?

Ответ 8

Просто подумал об этом - почему бы не использовать JQuery для этого? с помощью всего лишь FEW строк кода вы сделаете это.

Сначала загрузите JQuery из www.jquery.com. Затем вы должны правильно связать его с вашим файлом в заголовке HTML:

<script src="url_to_your_jquery_file_here"></script>

Затем добавьте еще одну часть Javascript ниже этого:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("li a").hover(
          function () {
            $(this).css("color", "#3366a9");
          }, 
          function () {
            $(this).css("color","#838383");
          }
        );
    });
</script>

Ответ 9

Попробуйте добавить:

display: block;
position: relative;

на ваш css a.

Ответ 10

Я пробовал каждое найденное мной решение. В моем случае ошибка была определена Google Translator. Я удалил его в IE и Opera (где он вызывает другие ошибки), и все работает отлично.

Ответ 11

Используйте <!DOCTYPE html> в верхней части страницы. Это устранит проблему и другие проблемы, которые могут возникнуть.

Ответ 12

Элемент hover в режиме quirk в IE не работает. Альтернатива устанавливается через script -event (без jquery) элемента html:

<a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >  My link</a>

Ответ 13

вы можете добавить следующую строку вверху вашего html файла, она работает для меня в 9 и выше:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ответ 14

вы можете добавить следующую строку в верхнюю часть своего html файла, она работает для меня, например, 9:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ответ 15

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

Просто поместите его в END вашего CSS, так как браузеры Webkit не будут читать что-либо ниже.

* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }