IE9 boxshadow 错误答案

【问题标题】：IE9 boxshadow bugIE9 boxshadow 错误
【发布时间】：2012-12-21 02:50:14
【问题描述】：

我发现如果你调整 div 的大小，阴影会保持在原来的位置。我单击按钮使子 div 更改高度，父级也更改高度，但阴影并未移除。

<script type="text/javascript">
    $(function () {
        // change width
        $('#btn1').toggle(function () {
            $('#div1').height(100);
        },
        function () {
            $('#div1').height(200);
        });
    });
</script>

 <style type="text/css">
    #div1
    {
        height: 200px;
    }
    #div2
    {
        width: 200px;
        box-shadow: 2px 2px 8px #000000;
        position: absolute;
        left: 200px;
        top: 200px;
    }
</style>

<body>
   <div id="div2">
    <div id="div1">
        <input type="button" id="btn1" value="test" />
    </div>
</div>

http://jsfiddle.net/edward44444/v2NmD/1/

【问题讨论】：

标签： internet-explorer-9 css

【解决方案1】：

直截了当的解决方法是在设置高度之前以及在设置高度时移除阴影：

CSS：

#div2.noshadow {
    box-shadow: none;
}

JS：

$(function() {
    $('#btn1').toggle(function() {
        $('#div2').addClass('noshadow');
        $('#div1').height(100);
        $('#div2').removeClass('noshadow');
    }, function() {
        $('#div1').height(200);
    });
});

http://jsfiddle.net/v2NmD/32/

【讨论】：