jQuery slideDown/slideUp funktioniert nicht in IE7

Question

So verwende ich eine sehr einfache jQuery .slideDown, die in FF, Safari und Chrome funktioniert. Funktioniert überhaupt nicht in IE7. hier ist das Skript:

---

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

---

Ich habe stundenlang untersucht, und im Zusammenhang etwas über einen Bug gefunden/unten, um slideup, die sie verursacht in IE7 zum Scheitern verurteilt, wenn sie auf Nachkommen von postion verwendet wird : feste Elemente Diese Animation findet innerhalb einer Position statt: fixed navbar, aber ich habe versucht, die inneren Elemente mit Position zu umhüllen: Relativ, aber ohne Erfolg, ich bekomme immer noch nichts in IE. Beachten Sie auch, dass das nav -Element mit jQuery ausgeblendet wird, diese Funktion funktioniert sogar in IE7, die SlideUp/down jedoch nicht. Hier

ist die zugehörige 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

Der Grund für dieses Verhalten in meinem Beispiel ist, dass der IE nicht .focus erkennt, die ich die .slideUp/Runter auszulösen wurde mit. Ich habe eine gute Antwort gefunden, die das Problem erklärt here, aber dies ermöglicht es Ihnen, eine CSS-Klasse im Fokus hinzuzufügen, aber ich muss ein separates Element mit SlideUp/Down auf .focus animieren, so dass die CSS-Klasse nicht meine Situation hilft, hat jemand Ideen?

---

Verstanden! Ich hatte eher zu verwenden MouseEnter- als Fokus, aber hier ist das fertige Skript mit einem bedingten MouseEnter- Ereignisse für den Teufel, auch bekannt als 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

jQuery slideUp(), slideDown() und slideToggle() funktioniert nicht mit position:relative Elementen in IE7. Einige Dia Probleme können durch das Hinzufügen

zoom: 1; 

Zum Schiebe Behälter und/oder Elemente aufgelöst werden.

Wir mussten wieder <Tabelle> für Layout verwenden, um einige der gleitenden Probleme zu lösen.