jquery - 在 Internet Explorer 9 中使用 jQuery 为子项设置动画时父 div 投影错误

Question

当父 div 应用了 css 投影，并且其子元素使用 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

This question是相似的，我相信我提出的答案是中肯的。

简而言之:http://jsfiddle.net/DwApF/12/

完整解释:https://stackoverflow.com/a/8676063/453277