JavaScript问题与IE浏览器

Question

我现在大约6个月前建立了一个网站，并使用jQuery设计了一些具有一定交互性的菜单。它在我的朋友（Firefox，Safari等）中运行得很好。原来IE7 & 8不玩球。

IE中的错误指向jQuery（在Google的CDN上）与invalid argument。可以查看here。将鼠标移到顶部标题上，查看Firefox中会发生什么。这个不是发生在IE7/8中。

这里是我的效果

String.prototype.safe = function() { 
    var string = this; 
    string = string.toLowerCase().replace(/\s/g, '-'); 
    string = string.replace(/&/g, 'and'); // & appears as just & 
    return string; 
} 

var subMenu = { 
    activeMenuId: 'submenu-about-us', 
    hideDelay: null, 
    init: function(){ 
     var self = this; 
     $('#header').append('<div id="sub-menu"></div><div id="hover"></div>'); 
     $('#background-elements').append('<span></span>'); 

     var $subMenu = $('#sub-menu'); 
     var $hover = $('#hover'); 

     $('#menu li ul').each(function(){ 
      var id = 'submenu-' + $(this).parents('li').find('.inner').text().safe(); 
      $(this).attr({ 
       id: id 
      }).prependTo($subMenu); 
     }); 

     // move slider to where it should be 

     var uri = document.location.pathname; 

     uri = uri.replace(PATH_BASE + '/', '') 

     var uriSegments = uri.split('/'); 

     var currentCategory = uriSegments[0]; 

     if (currentCategory) { 

      var uriSegmentToListIndex = {}; 

      uriSegmentToListIndex['about-us'] = 0; 
      uriSegmentToListIndex['tenant-advice-and-advocacy'] = 1; 
      uriSegmentToListIndex['housing-services'] = 2; 
      uriSegmentToListIndex['tenants'] = 3; 
      uriSegmentToListIndex['applicants'] = 4; 
      uriSegmentToListIndex['housing-development-projects'] = 5; 
      uriSegmentToListIndex['news-and-publications'] = 6; 
      uriSegmentToListIndex['contact'] = 7; 

      var currentListItemIndex = uriSegmentToListIndex[currentCategory]; 

      var sliderDropShadowOffset = 14; 

      if (currentListItemIndex) { 

       var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
      } 

      $hover.css({ 
       left: sliderLeft + 'px' 
      }); 

      this.activeMenuId = 'submenu-' + currentCategory; 

      // make the right sub menu appear 

      $subMenu.find('ul').hide(); 
      $('#submenu-' + currentCategory).fadeIn(500); 
     } 




     $('#menu li .inner').parents('li').hoverIntent(function(){ 

      var id = 'submenu-' + $(this).find('.inner').text().safe(); 

      if (id != self.activeMenuId) { 

       self.activeMenuId = id; 

       $subMenu.find('ul').hide(); 

       var newLeft = $(this).position().left + sliderDropShadowOffset; // offset for drop shadow 



       $hover.animate({ 
        left: newLeft + 'px' 
       }, 500, function(){ 
        $subMenu.find('ul').hide(); // sometimes some remain 
        $('#' + id).fadeIn(800); 

       }); 

      } 



     }, function(){ 
      // do nothing! 

     }); 


    } 



} 

源代码，我已经试过了通常的嫌疑人，并与IE8的开发工具一展身手，但还没有想通这一个呢。所以我转向堆栈溢出社区:)

任何人都知道这个问题？

Answer 1

该错误发生在这条线上IE 8：

$hover.css({ 
    left: sliderLeft + 'px' 
}); 

的sliderLeft可变永远不会被初始化，因为currentListItemIndex是0：

if (currentListItemIndex) { 
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset; 
} 

>> currentListItemIndex 
0 

>> sliderLeft 
undefined 

更新

IE 8具有非常好的内置调试器（最后）：

1. 通过转到工具 - >高级并取消选中“禁用脚本调试（Internet Explorer）”选项，确保它未被禁用。

2. 当浏览器遇到页面上的错误时，您将收到一个对话框，询问您是否要运行调试器。确保选中“在Internet Explorer中使用内置脚本调试器”选项。点击“是”来启动调试器。

3. 当传递一个意外的值时，很多次jQuery代码都会出错。这在开始时并不是很有用，因为问题很少出现jQuery的错误，大部分时间代码都被最小化了。您需要在调试器中选择“调用栈”选项卡，然后按照堆栈调用，直到出现导致问题的代码。这就是我能够在脚本中找到确切的一行。

4. 您可以使用Console，Locals和Watch标签来运行某些脚本或查看发生错误时正在使用的变量（如currentListItemIndex和sliderLeft变量）的当前状态。

Answer 2

您正在使用jQuery 1.3.1，它是旧版本的jQuery，并且可能通过添加最新版本的jQuery来解决此问题。