1

我已经将一个网站放在一起，涉及相当多的不透明/褪色效果，但是有一部分（菜单栏）在 IE8 中显示不正确，而且对于我的生活，我无法弄清楚为什么。它在更高版本的 IE 和适当的浏览器中运行良好。

该网站位于

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);
    });
4

2 回答 2

0

尝试在要设置动画的元素上使用 css zoom 属性。在你的情况下，我认为是这样的：

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

我无法在小提琴上进行测试，因为它根本不支持 IE < 9.0

于 2013-06-20T02:10:40.007 回答
0

IE7 & 8 的主要问题是它们不能正确支持不透明效果。您可以在 IE 8 中使用 CSS，例如

filter: alpha(opacity=70);

但是，据我所知，当您在 jQuery 中使用 .fadeIn() 等函数时，它会删除透明效果。

这篇文章中提到了一些可能的解决方法：Opacity CSS not working in IE8

请注意，在 IE8 中，大多数这些仅适用于block关卡元素。

于 2013-06-20T01:08:42.347 回答