滚动/悬停选项卡在IE8中显示不正确

Question

选中此页。在firefox，chrome或IE9/10上，标题上的标签显示均匀并正确悬停。但是，在IE8上，选项卡下降并从标题消失。任何人都熟悉这个问题？

http://www.seanprovost.com/frah_dev/newclients.php

$(document).ready(function() { 
$("#nav1").animate({ 
    marginTop: "50px" 
}, 'slow'); 
$("#nav2").animate({ 
    marginTop: "50px" 
}, 'slow'); 
$("#nav3").animate({ 
    marginTop: "50px" 
}, 'slow'); 
$("#nav4").animate({ 
    marginTop: "50px" 
}, 'slow'); 
$("#nav5").animate({ 
    marginTop: "50px" 
}, 'slow'); 

//Animal Care Animation 
$("#link_ac").hover(function() { 
    $("#nav1").animate({ marginTop: "0px" }, 'slow'); 
}, function() { 
    $("#nav1").animate({ marginTop: "50px" }, 'slow'); 
}); 
//Animal Care Rollover 
$("#link_ac").hover(function() { 
    $("#nav1").css({"background-image" : "url('i/nav_ac_o.png')" }); 
}, function() { 
    $("#nav1").css({"background-image" : "url('i/nav_ac.png')" }); 
}); 
//Our Team Animation 
$("#link_ot").hover(function() { 
    $("#nav2").animate({ marginTop: "0px" }, 'slow'); 
}, function() { 
    $("#nav2").animate({ marginTop: "50px" }, 'slow'); 
}); 
//Our Team Rollover 
$("#link_ot").hover(function() { 
    $("#nav2").css({"background-image" : "url('i/nav_ot_o.png')" }); 
}, function() { 
    $("#nav2").css({"background-image" : "url('i/nav_ot.png')" }); 
}); 
//Boarding Animation 
$("#link_b").hover(function() { 
    $("#nav3").animate({ marginTop: "0px" }, 'slow'); 
}, function() { 
    $("#nav3").animate({ marginTop: "50px" }, 'slow'); 
}); 
//Boarding Rollover 
$("#link_b").hover(function() { 
    $("#nav3").css({"background-image" : "url('i/nav_b_o.png')" }); 
}, function() { 
    $("#nav3").css({"background-image" : "url('i/nav_b.png')" }); 
}); 
//New Clients Animation 
$("#link_nc").hover(function() { 
    $("#nav4").animate({ marginTop: "0px" }, 'slow'); 
}, function() { 
    $("#nav4").animate({ marginTop: "50px" }, 'slow'); 
}); 
//New Clients Rollover 
$("#link_nc").hover(function() { 
    $("#nav4").css({"background-image" : "url('i/nav_nc_o.png')" }); 
}, function() { 
    $("#nav4").css({"background-image" : "url('i/nav_nc.png')" }); 
}); 
//Grooming Animation 
$("#link_g").hover(function() { 
    $("#nav5").animate({ marginTop: "0px" }, 'slow'); 
}, function() { 
    $("#nav5").animate({ marginTop: "50px" }, 'slow'); 
}); 
//Grooming Rollover 
$("#link_g").hover(function() { 
    $("#nav5").css({"background-image" : "url('i/nav_g_o.png')" }); 
}, function() { 
    $("#nav5").css({"background-image" : "url('i/nav_g.png')" }); 
}); 

Answer 1

您的导航元素的CSS需要一些工作。使用控制台检查LI和<a>标签等将会看到，由于缺少主要元素上的css结构以及这些元素中的浮动元素，IE正在看到它们的定位不同。

此验证程序在页面中显示损坏的标签。牛肉了对资产净值的CSS，修复损坏的标签，你应该更好的跨浏览器

编辑：禁用JavaScript和会看到jQuery是不是罪魁祸首

Answer 2

，而不是使用两个hover处理程序，你可以将它们结合起来，并尝试stop()方法：

$("#link_ac").hover(function() { 
     $("#nav1").stop().animate({ marginTop: "0px" }, 'slow'); 
     $("#nav1").css({"background-image" : "url('i/nav_ac_o.png')" }); 
    }, function() { 
     $("#nav1").stop().animate({ marginTop: "50px" }, 'slow'); 
     $("#nav1").css({"background-image" : "url('i/nav_ac.png')" }); 
    });