Перекрывающие/зависающие вкладки отображаются неправильно в 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> и т. Д. Увидите, что IE видит их расположение по-разному из-за отсутствия структуры CSS на основных элементах и ​​плавает внутри этих элементов.

Также валидатор показывает сломанные метки на странице. Говядина вверх по CSS на нав, исправить битые теги и вы должны быть лучше кросс-браузер

EDIT: отключить 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')" }); 
    });