IE9 boxshadow bug

我發現如果您調整div的大小，陰影將保持原始位置。我點擊按鈕讓孩子div改變身高，而父母也改變身高，但是陰影沒有移除。IE9 boxshadow bug

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

來源

2012-12-21 edward44444

直白的解決方法是設置高度之前除去影子，當將其設置回：

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/

來源

2013-04-22 11:14:01 Olegas

回答

相關問題