Блог

У меня есть 2 divs. Родитель и ребенок. У меня есть поле-тень, примененное к родительскому div. Дочерний элемент можно перетаскивать. Я заметил, что в IE, если я пытаюсь перетащить дочерний элемент за пределы родительского, он обрезается и обрезается. Если вы удалите класс shadow, он будет работать нормально. Это происходит в 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>
 

Вы должны удалить эти filter свойства.

Затем вы могли бы использовать CSS3 PIE для обработки рисования тени.

Если вы не хотите использовать CSS3 PIE, вы могли .clone() #one бы (не забудьте изменить id ) и полностью расположить копию под #one и добавить filter к ней.