Question

我在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。

我试过了

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

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

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

Answer 4

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

在此代码中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/

也许我迟到了回答:) ...

Answer 5

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

sollution 可能首先加载菜单，但这有点像黑客攻击。仍然

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

5 个答案: