0

检查此页面。在 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')" });
});
4

2 回答 2

1

导航元素的 css 需要一些工作。使用控制台检查LI和 <a>标签等会看到 IE 看​​到它们的位置不同，因为主要元素上缺少 css 结构并且在这些元素中浮动。

验证器也在页面中显示损坏的标签。加强导航上的 css，修复损坏的标签，你应该更好地跨浏览器

编辑：禁用 javascript 并会看到 jQuery 不是罪魁祸首

于 2012-06-17T20:38:53.350 回答
0

而不是使用两个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')" });
    });
于 2012-06-17T20:26:44.247 回答