如果瀏覽器是Internet Explorer，請加載不同的jquery腳本？

Question

我一直在使用Internet Explorer中的特定佈局來解決一些主要問題。我知道IE有不同的寬度和高度時，有邊框和填充，所以我包括代碼在我的CSS使導航看起來像在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。

我已經試過

<script type="text/javascript">var runFancy = true;</script> 
<script>runFancy = true;</script> 
<!--[if IE]> 
<script type="text/javascript"> 
runFancy = false; 
</script> // <script type="text/javascript" src="iemenu.js"></script> 
<![endif]--> 

<script type="text/javascript" src="menu.js"></script> 

我也曾嘗試

<!--[if IE 9]> 
<script type="text/javascript" src="iemenu.js"></script> 
<![endif]--> 

另外我發現，沒有工作，以及：

<!--[if lt IE 9]> 
<script type="text/javascript" src="iemenu.js"></script> 
<![endif]--> 

我遇到的另一個問題是動畫，這會導致導航縮小高度，然後在鼠標被拿走時回到正常大小，例如當我在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和之前的IE代碼

Answer 1

試試這樣說：

<script type="text/javascript">var runFancy = true;</script> 
<script>runFancy = true;</script> 
<script type="text/javascript" src="menu.js"></script> 
<!--[if IE]> 
<script type="text/javascript"> 
runFancy = false; 
</script> // <script type="text/javascript" src="iemenu.js"></script> 
<![endif]--> 

在這種情況下menu.js將被載入第一和iemenu.js將在後面加載。如果功能相同，iefunction將覆蓋「正常」功能，它應該工作。

Answer 2

您的需要$.browser

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

腳本加載，你可以使用$.getScript

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

所以最終的例子

<script type="text/javascript" src="iemenu.js"> 
    if ($.browser.msie) { 
     $.getScript('iemenu.js', function() {}); 
    } 
</script> 

Answer 3

你menu.js永遠載入，因爲它不是在任何if。如果它覆蓋你的功能，你會回到原點。

溶劑可能是首先加載菜單，但這有點破解。仍然

Answer 4

嘗試檢測不當行爲並使用jQuery.support，因爲jQuery.browser已被棄用。

Answer 5

我會使用這種方法，因爲在我看來，它更加清晰和準確，然後加載兩個腳本並覆蓋代碼，就像在接受的答案中一樣。

在此代碼iemenu.js將僅當它是IE版本小於IE9和在其他情況下，像IE9-10-11或任何其他瀏覽器被加載時，它將加載menu.js

<!--[if lt IE 9]> 
    <script src="iemenu.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
    <script src="menu.js"></script> 
<!--<![endif]--> 

下面是例子，約兩個不同版本的jQuery的討論： http://www.impressivewebs.com/loading-different-jquery-version-ie6-8/

也許我下旬答案:) ...