Parent div drop-shadow bug when children is animated with jQuery in Internet Explorer 9

问题

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.

回答1:

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

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

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

回答2:

Your code is a bit complicated. I couldn't exactly tell what your desired behavior was, but this is looking smoother, and I feel like IE9 would handle it better, but I wasn't able to test.

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

I updated your JS Fiddle. I feel like it has to do with the .stop(true,true).

来源：https://stackoverflow.com/questions/8180922/parent-div-drop-shadow-bug-when-children-is-animated-with-jquery-in-internet-exp