在 Internet Explorer 9 中使用 jQuery 为孩子设置动画时出现父 div 阴影错误答案

【问题标题】：Parent div drop-shadow bug when children is animated with jQuery in Internet Explorer 9在 Internet Explorer 9 中使用 jQuery 为孩子设置动画时出现父 div 阴影错误
【发布时间】：2012-01-01 03:05:10
【问题描述】：

当父 div 应用了 css 阴影，并使用 jQuery 对其子 div 进行动画处理以使父 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":""});
    });
});

我的问题是；

这是 jQuery 还是 Internet Explorer 错误？
你能找到解决办法吗？（Internet Explorer 9 不支持转换，所以我一无所知）

非常感谢您的帮助。

【问题讨论】：

我在这里stackoverflow.com/questions/8675773/… 也问过类似的问题，想知道您是否找到了任何解决方法

标签： jquery jquery-ui css internet-explorer-9 jquery-animate

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您的代码有点复杂。我无法准确说出您想要的行为是什么，但这看起来更流畅，我觉得 IE9 会更好地处理它，但我无法测试。

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

我更新了你的JS Fiddle。我觉得这与.stop(true,true) 有关。

【讨论】：

我的代码除了指出 IE9 中的一个错误之外没有尝试做任何事情：当你降低孩子的高度时，会出现一些线条。在我的“js fiddle”示例中很明显。如果您需要更多信息，可以添加评论。我很感激你的努力，但这个答案与这个问题无关，因为你甚至没有降低高度。请不要仅仅为了回答问题而回答问题，因为您正在减少获得正确答案的机会。谢谢。