当在Internet Explorer 9中使用jQuery为子动画时，父div阴影错误 [英] Parent div drop-shadow bug when children is animated with jQuery in Internet Explorer 9

问题描述

当父div应用css drop-shadow，并且其子元素使用jQuery进行动画处理时，父div会改变高度，当在IE9中查看页面时，父div下面出现奇怪的线条。以下是一个示例：是类似的，我相信我提出的答案是相关的。

简介： http://jsfiddle.net/DwApF/12/

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

When a parent div has a css drop-shadow applied, and its children is animated with jQuery so that the parent div changes height, strange lines below the parent div appear when viewing the page in IE9. Here is an example: http://jsfiddle.net/vPqxb/11/ and a screenshot:

For the one who just want to see the code; here is the HTML:

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

, the 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;
}

and the JavaScript (note that the first one requires 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":""});
    });
});

My questions would be;

1. Is this a jQuery or an Internet Explorer bug?
2. Can you find a way around it? (Internet Explorer 9 doesn't support transitions so I am clueless)

Thank you very much for any help.

解决方案

This question is similar, and I believe the answer I proposed is pertinent.

In brief: http://jsfiddle.net/DwApF/12/

Full explanation: http://stackoverflow.com/a/8676063/453277

这篇关于当在Internet Explorer 9中使用jQuery为子动画时，父div阴影错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！