box-shadow, примененная к родительскому div, обрезает дочерний div в IE

Question

У меня есть 2 дел. Родитель и ребенок. У меня есть 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 к этому.