jQuery slideDown/slideUp non funziona in IE7

Question

Quindi sto usando un jQuery molto semplice .slideDown che funziona perfettamente in FF, Safari e Chrome. Non funzionerà affatto in IE7. Ecco lo script:

---

//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"); 
}); 
}); 

---

Ho fatto ricerche per ore e ho trovato qualcosa su un bug relativo al slideUp/verso il basso che induce a fallire in IE7 quando viene usato su discendenti di postion : elementi fissi. Questa animazione sta accadendo all'interno di una posizione: barra di navigazione fissa, tuttavia, ho provato a racchiudere gli elementi interni con la posizione: relativa ma senza successo, non ottengo ancora nulla in IE. Inoltre, si noti che l'elemento di navigazione viene nascosto con jQuery, quella funzione funziona anche in IE7, tuttavia, la funzione slide-down/down non lo è.

Ecco il relativo CSS:

/* --------------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 ragione di questo comportamento nel mio esempio è che IE non riconosce .focus che stavo usando per far scattare l'.slideUp/Down. Ho trovato una buona risposta per spiegare il problema here, tuttavia questo ti permette di aggiungere una classe CSS su focus, ma ho bisogno di animare un elemento separato con slideUp/Down su .focus così la classe CSS non aiuta la mia situazione, qualcuno ha idee?

---

Trovato! Ho dovuto usare mouseenter piuttosto che concentrarsi, ma qui è la sceneggiatura completata con un evento MouseEnter condizionale per il diavolo, alias 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

di slideUp(), slideDown() e slideToggle() jQuery non funzionano con position:relative elementi in IE7. Alcuni problemi di diapositive possono essere risolti con l'aggiunta di

zoom: 1; 

al contenitore e/o gli elementi scorrevoli.

Abbiamo dovuto ripristinare l'uso di <tabella> per il layout per risolvere alcuni dei problemi di scorrimento.