Question

我发现如果你调整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/

Answer 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/

IE9 boxshadow bug

1 个答案: