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

nav要素のcssにはいくつかの作業が必要です。コンソールを使用してタグなどを検査するLIと <a>、メイン要素にcss構造がなく、それらの要素内にフロートしているため、IEがそれらの位置を異なって認識していることがわかります。

また、バリデーターはページに壊れたタグを表示しています。navでcssを強化し、壊れたタグを修正すれば、クロスブラウザの方が良いはずです

編集：javascriptを無効にすると、jQueryが原因ではないことがわかります

于 2012-06-17T20:38:53.350 に答える
0

hover2つのハンドラーを使用する代わりに、それらを組み合わせて、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 に答える