滾動/懸停選項卡在IE8中顯示不正確

選中此頁。在firefox，chrome或IE9/10上，標題上的標籤顯示均勻並正確懸停。但是，在IE8上，選項卡下降並從標題消失。任何人都熟悉這個問題？滾動/懸停選項卡在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')" }); 
});

來源

2012-06-17 user1411823

是，使用'停止（）'前'動畫（）'方法。 – undefined

以有效html開頭：http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.seanprovost.com%2Ffrah_dev%2Fnewclients.php – 2012-06-17 20:18:20

謝謝undefined。你能給我一個你的意思嗎？描述已編輯以包含動畫代碼。發佈作爲答案，所以我可以標記爲答案，並添加到您的代表:) – user1411823

您的導航元素的CSS需要一些工作。使用控制檯檢查LI和<a>標籤等將會看到，由於缺少主要元素上的css結構以及這些元素中的浮動元素，IE正在看到它們的定位不同。

此驗證程序在頁面中顯示損壞的標籤。牛肉了對資產淨值的CSS，修復損壞的標籤，你應該更好的跨瀏覽器

編輯：禁用JavaScript和會看到jQuery是不是罪魁禍首

來源

2012-06-17 20:38:53 charlietfl

，而不是使用兩個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-17 20:26:44 undefined

似乎仍然有同樣的問題。而不是所有的標籤內嵌在頂部，他們似乎像一系列樓梯一樣下臺：/只在IE8或更早版本。他們在任何其他瀏覽器上都顯示正常 – user1411823

@ user1411823對不起，我在Macintosh上，無法訪問IE8。 – undefined

沒關係謝謝你的反饋 – user1411823

滾動/懸停選項卡在IE8中顯示不正確

回答

相關問題