2013-06-20 7 views
1

Я собрал сайт вместе с множеством эффектов непрозрачности/затухания, но одна часть (строка меню) отображается неправильно в IE8, и для жизни меня я не могу работать почему. Он отлично работает в более высоких версиях IE и в соответствующих браузерах.Проблемы с непрозрачностью IE8

Сайт вверх на

http://stevorasp.no-ip.org

и полный код доступен оттуда, но, насколько я могу понять, что это связано с этой части JS:

$('a').fadeTo(0, 0); 
    $('a').addClass('hidden'); 
    $('#about_cont').fadeTo(0, 0); 
    $('#gigs_widget').addClass('hidden'); 
    $('#music_widget').addClass('hidden'); 
    $('#contact_cont').addClass('hidden'); 
    .... 
    setTimeout(function(){ 
     $('a').removeClass('hidden'); 
     $('a').fadeTo(1200, 0.7); 
     $('#about_cont').fadeTo(1200, 0.6); 
    }, 11700); 

Вероятно, я, наверное, пропустил что-то действительно очевидное, но я в тупике.

бит, который меня смущает то, что части содержания работы сайта штрафа с непрозрачностью эффектов в IE8, используя следующий пример

$('#about').click(function() { 
     $('#about_cont').fadeTo(0,0); 
     $('#gigs_widget').animate({"opacity": 0}, 600); 
     $('#music_widget').animate({"opacity": 0}, 600); 
     $('#contact_cont').animate({"opacity": 0}, 600); 
     setTimeout(function(){ 
     $('#gigs_widget').addClass('hidden'); 
     $('#music_widget').addClass('hidden'); 
     $('#contact_cont').addClass('hidden'); 
     $('#about_cont').removeClass('hidden'); 
     }, 590); 
     setTimeout(function(){ 
     $('#about_cont').animate({"opacity": 0.6}, 600); 
     }, 610); 
    }); 
+0

Я также попытался '$ («а») .animate ({"opacity": 0.7}, 1200); ' вместо fadeTo, но без радости. –

ответ

0

Основная проблема с IE7 & 8 является то, что они надевают Правильно поддерживайте эффекты непрозрачности. Вы можете использовать CSS в IE 8, как

filter: alpha(opacity=70); 

Однако при использовании функции как .fadeIn() и т.д. в JQuery, насколько я знаю, он извлекал эффекты прозрачности.

Есть несколько возможных рабочих обходные, упомянутые в этой статье: Opacity CSS not working in IE8

Имейте в виду, что в IE8 большинство из них только на работе block элементов уровня.

+0

Мне было интересно, если бы это было так, но части контента сайта действительно исчезают и выходят правильно - даже если панель меню не показывает, что ссылки активны и функционируют, как ожидалось, с помощью затухания. –

+0

Похоже, вы используете .animate() для бит контента, а не fadeIn(), возможно, попробуйте анимировать их, а не использовать функцию fadeIn и посмотреть, разрешает ли это это решение. – JanR

+0

Не повезло с этим. IE делает мою голову в ... –

0

Попробуйте использовать свойство css zoom для элемента, который хотите оживить. В вашем случае, что-то вроде этого я думаю:

a, a *, #about_cont{zoom:1;display:block} 

Я couldn't тест на скрипке, потому что он просто не поддерживает IE < 9,0

+0

Хум да, это взломать, но мы говорим об Internet Explorer :) –

+0

fair one :) не повезло, в любом случае, к сожалению ... У меня есть подозрительное подозрение, что это проблема hasLayout. Будет обновляться, когда у меня была возможность проверить его более подробно. –

+0

Вы пробовали свойство масштабирования с помощью? Important? –

Смежные вопросы