Lỗi thả xuống div dành cho cha mẹ khi trẻ được làm động với jQuery trong Internet Explorer 9

Question

Khi div cha có bóng thả css được áp dụng và con của nó được làm động với jQuery sao cho div mẹ thay đổi chiều cao, các dòng lạ bên dưới div cha xuất hiện khi xem trang trong IE9. Dưới đây là một ví dụ: http://jsfiddle.net/vPqxb/11/ và một ảnh chụp màn hình:

Đối với một trong những người chỉ muốn xem mã; đây là HTML:

<div class="parent"> 
    <div class="longer">&nbsp;</div> 
</div> 

, CSS:

div.parent { 
    background: #ddd; 
    box-shadow: 1px 1px 2px 1px #c9c7c9; 
    width: 80%; 
} 

div div { 
    background: red; 
    height: 10px; 
    width: 30px; 
} 

.longer { 
    height: 200px; 
} 

và JavaScript (lưu ý rằng người đầu tiên đòi hỏi jQuery UI):

$("a.toggleclass").on("click", function() { //some trigger, doesn't matter where 
    div.stop(true,true).toggleClass("longer", 1000); 
}); 

$("a.animate").on("click", function() { //another one without jQuery UI 
    div.stop(true,true).animate({"height":"20px"}, function() { 
     div.attr({"style":""}); 
    }); 
}); 

Câu hỏi của tôi sẽ là;

1. Đây có phải là lỗi jQuery hoặc Internet Explorer không?
2. Bạn có thể tìm thấy một cách nào đó không? (Internet Explorer 9 không hỗ trợ chuyển tiếp vì vậy tôi không biết gì)

Cảm ơn bạn rất nhiều vì đã giúp đỡ.

Answer 1

This question tương tự và tôi tin rằng câu trả lời tôi đề xuất là thích hợp.

Tóm lại: http://jsfiddle.net/DwApF/12/

Full giải thích: https://stackoverflow.com/a/8676063/453277

Answer 2

Mã của bạn hơi phức tạp. Tôi không thể nói chính xác hành vi mong muốn của bạn là gì, nhưng điều này trông mượt mà hơn, và tôi cảm thấy IE9 sẽ xử lý nó tốt hơn, nhưng tôi không thể kiểm tra.

$("a.toggleclass").click(function() { 
    $('.parent').animate({height: 1000}, '1000'); 
}); 

Tôi đã cập nhật JS Fiddle của bạn. Tôi cảm thấy như nó phải làm với .stop(true,true).