jQuery slideDown/slideUp no funciona en IE7

Question

Así que estoy usando un .slideDown jQuery muy básico que funciona muy bien en FF, Safari y Chrome. No funcionará en absoluto en IE7. aquí es el guión:

---

//Top Mailing List Drop down animation 
$(document).ready(function() { 
$('div#top_mailing_hidden').hide(); 

// Expand Panel 
$("input#top_mailing").focus(function(){ 
$("div#top_mailing_hidden").slideDown("slow"); 
}); 

// Collapse Panel 
$("input#top_mailing").blur(function(){ 
$("div#top_mailing_hidden").slideUp("slow"); 
}); 
}); 

---

He estado investigando durante horas y encontré algo acerca de un error relacionado con slideUp/abajo que hace que se fallará en IE7 cuando se utiliza en los descendientes de Postion : elementos fijos. Esta animación está ocurriendo dentro de una posición: barra de navegación fija, sin embargo, he intentado envolver los elementos internos con la posición: relativa, pero en vano, todavía no obtengo nada en IE. Además, observe que el elemento nav se está ocultando con jQuery, esa función está funcionando incluso en IE7, sin embargo, la barra deslizante/abajo no lo está.

Aquí es el CSS relacionados:

/* --------------Top Dropdown Mailing List------------------- */ 

#top_nav div#top_mailing{ 
    float: right; 
    width: 351px; 
    padding: 0 10px 10px 5px; 
    background: url(images/top_mailing_bg.png) bottom center no-repeat; 
    position: absolute; 
    top: 0; 
    right: 0; 
    color: #fff; 
    text-shadow:0 -1px 0px #222; 
} 
#top_mailing #top_mailing_hidden{ 
    font-size: .7em; 
    text-align: center; 
    position: relative; 
    height: 30px; 
    zoom: 1; 
} 
#top_mailing #top_mailing_hidden div{ 
} 
#top_mailing #top_mailing_hidden a{ 
    color: #acffc0; 
    font-weight: bold; 
} 
#top_mailing #top_mailing_visible{ 
    height: 30px; 
    font-weight: bold; 
    font-size: .9em; 
    padding-top: 5px; 
} 

Answer 1

La razón de este comportamiento en mi ejemplo es que IE no reconoce .focus la que yo estaba usando para disparar el .slideUp/Abajo. He encontrado una buena respuesta explicando el problema here, sin embargo, esto te permite agregar una clase CSS en el enfoque, pero necesito animar un elemento separado con slideUp/Down en .focus para que la clase CSS no ayude mi situación, alguien tiene ideas?

---

¡Lo tiene! Tuve que usar MouseEnter en lugar de centrarse, pero aquí está el guión completo con un evento MouseEnter condicional para el diablo, también conocido como IE:

//Top Mailing List Drop down animation 
$(document).ready(function() { 

    if (jQuery.browser.msie === true) { 
     jQuery('#top_mailing') 
       .bind("mouseenter",function(){ 
        $("#top_mailing_hidden").slideDown('slow'); 
       }).bind("mouseleave",function(){ 
        $("#top_mailing_hidden").slideUp('slow'); 
       }); 
    } 

$('#top_mailing_hidden').hide(); 

// Expand Panel 
$("input#top_mailing").focus(function(){ 
$("#top_mailing_hidden").slideDown("slow"); 
}); 

// Collapse Panel 
$("input#top_mailing").blur(function(){ 
$("#top_mailing_hidden").slideUp("slow"); 
}); 

}); 

Answer 2

de slideUp(), slideDown() y slideToggle() jQuery no trabajo con position:relative elementos en IE7. Algunas cuestiones de diapositivas se pueden resolver mediante la adición de

zoom: 1; 

al recipiente y/o elementos de deslizamiento.

Tuvimos que volver a utilizar <tabla> para el diseño para resolver algunos de los problemas de deslizamiento.