应用于父div的box-shadow切断了IE中的子div

Question

我有2个div。父母和孩子。我将box-shadow应用于父div。子元素是可拖动的。我注意到在IE中，如果我尝试将子元素拖到父元素之外，它会被剪切并切断。如果你删除阴影类，那么它工作正常。这发生在IE6 IE7 IE8中。我该如何解决这个问题。

查看http://jsfiddle.net/g6nLU/2/

上的工作示例

#one{
    position:relative;
    background:blue;
    width:400px;
    height:400px;
}
#two{
    position:absolute;
    background:red;
    left:20px;
    top:20px;
    width:200px;
    height:200px;
}

.shadowside {
    -moz-box-shadow: 3px 3px 8px #888;
    -webkit-box-shadow: 3px 3px 8px #888;
    box-shadow: 3px 3px 8px #888; /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888888')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 5 Direction = 135, Color = '#888888');

}

<div id="one" class="shadowside">
    <div id="two"></div>
</div>

Answer 1

您必须删除filter属性。

然后，您可以使用CSS3 PIE处理绘制阴影。

如果您不想使用CSS3 PIE，可以.clone() #one（记得更改id）并将副本放在#one下，并且将filter添加到该内容。