如果浏览器是Internet Explorer,请加载不同的jquery脚本?

我一直在使用我在Internet Explorer中专门制作的布局遇到一些重大问题。 我知道当有边框和填充时,IE会以不同的方式转换宽​​度和高度,因此我在css中包含了代码,以使导航在IE中与在Mozilla和Chrome中看起来相同。

我现在遇到的问题是,我的导航上运行了jquery动画,并且它在IE中搞乱,其中大部分是由于我的Mozilla / Google代码与IE的细节之间的高度差异造成的。 我在几个网站上环顾四周,我创建了一个单独的jquery文件,其中包含高度参数,以使导航在IE中看起来很好,但出于某种原因IE浏览器从menu.js而不是iemenu.js

我找到了几个具有不同代码位的站点,试图强制IE读取iemenu.js而不是menu.js,而其他浏览器读取menu.js. 不幸的是,由于某种原因IE浏览器不会读取iemenu.js,而是阅读menu.js.

我试过了

var runFancy = true; runFancy = true;   

我也试过了

  

另一个我发现也没有用:

  

我遇到的另一个问题是动画导致导航高度缩小然后在鼠标被拿走时回到正常大小,当我在css中包含填充以使文本向下移动时非常小问题。 我已经在没有填充的情况下对此进行了测试,动画效果很好,但是大约一半的文本在动画完成后切断了。 我也尝试使用hoverintent插件,它没有解决毛刺问题。

以下是导航css的示例:

 .nav1 { width:96px; bottom:0; right: 311px; height:45px; font-size:20px; font-family:Verdana, Geneva, sans-serif; color:#ffffff; padding-top:15px; padding-bottom:0px; display: inline-block; position:absolute; text-align:center; border:1px solid; border-bottom:0px; border-color:#000000; background: url("images/navbg.jpg") no-repeat; } * html .nav1 { \width: 96px; /* for IE5 and IE6 in quirks mode */ w\idth: 98px; /* for IE6 in standards mode */ \height: 61px; /* for IE5 and IE6 in quirks mode */ h\eight: 62px; /* for IE6 in standards mode */ } 

这是jquery代码。 iemenu.js和menu.js都是相同的,它们只有不同的高度值:

 $(function() { $('.nav1').hover(function() { $(this).stop().animate({height:30, right: 311}, 300); }, function() { $(this).stop().animate({height:45, right: 311}, 300); }); $('.nav2').hover(function() { $(this).stop().animate({height:30, right: 408}, 300); }, function() { $(this).stop().animate({height:45, right: 408}, 300); }); $('.nav3').hover(function() { $(this).stop().animate({height:30, right: 505}, 300); }, function() { $(this).stop().animate({height:45, right: 505}, 300); }); $('.nav4').hover(function() { $(this).stop().animate({height:30, right: 602}, 300); }, function() { $(this).stop().animate({height:45, right: 602}, 300); }); }); 

我已经在我知道的书中尝试了几乎所有的IE修复工具,并且已经在这里和其他网站上找到了在线,到目前为止似乎没有任何工作….我在IE 7上工作。

此外,为了参考,如果它有帮助,我一直在我的其他脚本HTML和之前的if IE代码

试试这样:

     

在这种情况下,将首先加载menu.js,之后将加载iemenu.js。 如果函数是相同的,那么函数将覆盖“正常”函数,它应该工作。

你需要$ .browser

 if ($.browser.msie) { alert("this is ie!"); } 

对于脚本加载,您可以使用$ .getScript

 $.getScript('ajax/test.js', function() { alert('Load was performed.'); }); 

所以最后的例子

  

尝试检测错误行为并尽可能使用jQuery.support ,因为不推荐使用jQuery.browser 。

我会使用这种方法,因为在我看来,它更干净,更准确,然后加载两个脚本和覆盖代码,就像在接受的答案中。

在这个代码iemenu.js将被加载只有它是IE版本少于IE9,在其他情况下,如IE9-10-11或任何其他浏览器,它将加载menu.js

     

以下是关于jQuery的两个不同版本的示例和讨论: http : //www.impressivewebs.com/loading-different-jquery-version-ie6-8/

也许我迟到了回答:) …

您的menu.js将始终加载,因为它不在任何if。 如果它覆盖了你的function,你就会回到原点。

解决方法可能是首先加载菜单,但这有点像黑客。 仍然