如果浏览器是Internet Explorer，请加载不同的jquery脚本？ [英] Load different jquery script if browser is internet explorer?

问题描述

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

I've been having some major issues with a layout I'm making specifically in Internet Explorer. I know IE converts width and heights differently when there is borders and padding, so I included codes in my css to make the navigation look the same in IE as in Mozilla and Chrome.

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

The issue I'm having now is though is that I have jquery animation running on my navigation and it is messing up in IE, most of it due to the height differences between my Mozilla/Google code and the specifics for IE. I have looked around on several sites and I created a separate jquery file with the height parameters to make the navigation look fine in IE, but for some reason IE is pulling from menu.js instead of the iemenu.js

我发现有几个不同位代码的网站试图强制IE读取iemenu.js而不是menu.js，而其他浏览器读取menu.js.不幸的是，出于某种原因IE浏览器不会读取iemenu.js，而是阅读menu.js。

I found several sites with different bits of code to try and force IE to read iemenu.js instead of menu.js while the other browsers read menu.js. Unfortunately, for some reason IE will not read iemenu.js, instead reading 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]--> 

另一个我发现它也不起作用：

Another I found that didnt work as well:

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

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

Another issue I'm having is the animation, which causes the navigation to shrink in height then go back to it's normal size when the mouse is taken away, is extremely glitchy when I include padding in the css to make the text move down a bit. I have tested this without the padding and the animation works fine, but about half of the text cuts off after it does the animation. I have also tried using the hoverintent plugin which did not fix the glitching problem.

以下是导航css的示例：

Here is a sample of the navigation 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都是相同的，它们只有不同的高度值：

And here is the jquery code. Both iemenu.js and menu.js are built the same, they just have different values for height:

$(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上工作。

I have tried nearly every IE fixer trick in the book I know and have found online both here and on other sites and nothing seems to be working so far....I work on IE 7.

另外，如果有帮助的参考，我一直在放置if IE在我的其他脚本html之后和之前的代码

Also, for reference if it helps, I have been putting the if IE codes after my other script html and before

推荐答案

试试这样：

<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。如果函数相同，则函数将覆盖正常函数，它应该可以正常工作。

In this case menu.js will be loaded first and iemenu.js will be loaded afterwards. And if the functions are the same, the iefunction will overwrite the "normal" function and it should work.

这篇关于如果浏览器是Internet Explorer，请加载不同的jquery脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！