jQuery slideDown/slideUp không hoạt động trong IE7

Question

Vì vậy, tôi đang sử dụng jQuery .slideDown rất cơ bản đang hoạt động tốt trong FF, Safari và Chrome. Sẽ không hoạt động chút nào trong IE7. đây là kịch bả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"); 
}); 
}); 

---

Tôi đã nghiên cứu trong nhiều giờ và tìm thấy một cái gì đó về một lỗi liên quan đến slideUp/xuống mà làm cho nó thất bại trong IE7 khi được sử dụng trên hậu duệ của postion : các yếu tố cố định. Hoạt ảnh này đang diễn ra trong một vị trí: thanh điều hướng cố định, tuy nhiên, tôi đã cố gắng gói các phần tử bên trong với vị trí: tương đối nhưng không có kết quả, tôi vẫn không nhận được gì trong IE. Ngoài ra, lưu ý rằng phần tử nav đang bị ẩn với jQuery, chức năng đó đang hoạt động ngay cả trong IE7, tuy nhiên, trình duyệt không hoạt động.

Đây là CSS liên quan:

/* --------------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

Lý do cho hành vi này trong ví dụ của tôi là IE không nhận .focus mà tôi đã sử dụng để kích hoạt các .slideUp/Xuống. Tôi đã tìm thấy một câu trả lời tốt giải thích vấn đề here, tuy nhiên điều này cho phép bạn thêm một lớp CSS vào tiêu điểm, nhưng tôi cần tạo hiệu ứng một phần tử riêng biệt với slideUp/Down trên .focus để lớp CSS không giúp được tình huống của tôi, ai có ý tưởng?

---

OK! Tôi đã phải sử dụng mouseenter chứ không phải tập trung, nhưng ở đây là kịch bản hoàn thành với một sự kiện mouseenter điều kiện cho ma quỷ, hay còn gọi là 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() và slideToggle() không làm việc với position:relative yếu tố trong IE7. Một số vấn đề về slide có thể được giải quyết bằng cách thêm

zoom: 1; 

Để thùng chứa và/hoặc thành phần trượt.

Chúng tôi đã hoàn nguyên để sử dụng < bảng > để bố cục để giải quyết một số sự cố trượt.