Проблема с меню jQuery в IE6 / 7/8.Ссылки исчезают - PullRequest
Новая
       27

Проблема с меню jQuery в IE6 / 7/8.Ссылки исчезают

1 голос
/ 01 марта 2011

У меня странная проблема с моим меню для сайта, который я создаю.И это касается, конечно же, Internet Explorer (все версии).Когда я перемещаю курсор на элемент меню, он отображается один раз, а затем исчезает.Вы можете проверить это в IE здесь: ссылка на сайт После этого каждый элемент меню не кликабелен: - [

PS.Я просто хочу добавить, что вместо * .png background я пробовал * .jpg и * .gif безрезультатно.

ОК.У меня menu.js 

$('#nav a').hover(function(){
    $(this).stop().animate({opacity: 1}, 'slow');},
    function(){
    $(this).stop().animate({opacity: 0}, 'slow');
});

в css есть: 

body#start ul#nav {background: transparent url('../img/buttons_bckgd.png') no-repeat 0 0;}

#top_menu #nav li {float: left;}

#top_menu #nav li a {
   display: block;  
   height: 60px;
   margin-top: 7px;
   opacity: 0;
   }

.home {
   width: 163px;
   margin-left: 12px;
   }

.home:hover {background: url('../img/buttons_bckgd.png') no-repeat -12px -382px;}

html часть является чистым стандартом: 

<ul id="nav">
   <li><a class="home" href="#"></a></li>
   <li><a class="offer" href="#"></a></li>
   <li><a class="gallery" href="#"></a></li>
   <li><a class="contact" href="#"></a></li>
</ul>

Любые идеи, почему исчезает икак решить это?

Ответы [ 5 ]

1 голос
/ 01 марта 2011

Это очень странно.Я создал для вас пример на основе вашего кода.http://jsfiddle.net/Ruhley/emHFY/. У меня работает в IE7, а у вас?

0 голосов
/ 01 марта 2011

ОК, вторая попытка :-) Я провел некоторое тестирование http://jsfiddle.net/7h6Vn/, которое должно работать во всех браузерах.Однако ключевое свойство CSS, которое мне нужно было добавить, чтобы оно работало в IE6, - это строка background-color: white; в правиле #nav li a.Если вы уберете это, то анимация при наведении будет нарушена после первого раза.

У меня есть только IE6, так что это может решить проблему не для всех версий IE.зависание, но вам, возможно, придется поиграть с настройкой цвета фона для вашего меню.

Также благодарю сайт, который потряс мою память об исправлении background-color - http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/

Edit 2: OK, это http://jsfiddle.net/7h6Vn/1/ определенно работает (наведите курсор на область результатов).Я ссылаюсь на ваше изображение, чтобы показать анимацию наведения при наведении.Во время игры, чтобы заставить это работать, я также столкнулся с той же самой проблемой, которая была решена здесь .И последнее, на что следует обратить внимание: мне нужно было добавить фильтр непрозрачности CSS для IE, который является нестандартным, поэтому вы можете поместить его в отдельный файл CSS для IE.

Я не уверен, что этоэто именно то, что вы хотите, но, тем не менее, было весело играть с этим.

0 голосов
/ 01 марта 2011

Сценарий DD_belatedPNG влияет на свойство фонового изображения?Я знаю, вы сказали, что пытались использовать разные типы изображений, но пытались ли вы удалить скрипт исправления PNG?Этого нет в http://jsfiddle.net/Ruhley/emHFY/, что может объяснить, почему он работает в этой демонстрации, а не на вашем сайте.

0 голосов
/ 01 марта 2011

Попробуйте добавить событие события только тогда, когда документ готов, что-то похожее на: 

$(document).ready(function() {
  // Do menu event wiring here...
});

... и добавьте ссылку сценария include непосредственно перед закрытием тега body. Это обычно помогает мне.

0 голосов
/ 01 марта 2011

Можно ли разместить код на той же странице вместо другого файла сценария.

Открытие инструментов разработчика IE8 и отладка сценария menu.js показывает, что при наведении мыши во второй раз кодне выполнен.

...