在Internet Explorer 9中使用jQuery对子项进行动画处理时,父div div-shadow错误

Question

当父div应用了css drop-shadow,并且使用jQuery对其子项进行动画处理以使父div更改高度时,在IE9中查看页面时会出现父div下面的奇怪行.这是一个例子:http://jsfiddle.net/vPqxb/11/和截图:

对于只想看代码的人; 这是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;
}

和JavaScript(注意第一个需要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":""});
    });
});

我的问题是;

1. 这是jQuery还是Internet Explorer的错误？
2. 你能找到解决办法吗？(Internet Explorer 9不支持转换,所以我一无所知)

非常感谢您的帮助.

Answer 1

这个问题是类似的，我相信我提出的答案是中肯的。

简单来说： http: //jsfiddle.net/DwApF/12/

完整说明：https ://stackoverflow.com/a/8676063/453277