IE проблема - тень отбрасывает изображение по границам

Question

У меня проблема с IE8. Я получил ленту IMG поверх другого. Когда я отбрасываю тень на DIV-объект обоих IMG, лента с абсолютным позиционированием пересекается границами объекта.

Вот HTML-код:

<div class="news shadow">
    <img class="image" src="">
    <img src="ribbon.png" class="ribbon">
</div>

Вот определение стиля:

div.news{
    position:relative;
    background:white;
    width:50%;
    margin-left:25%;
    margin-bottom:3em;
    margin-top:1em;
    z-index: 10;
    clear: both;
}
.shadow{
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')";
}

Вот результат в IE8:

Вот ожидаемый результат:

РЕДАКТИРОВАТЬ: добавил jsfiddle в https://jsfiddle.net/xk3wz4fd/1/

Спасибо за вашу помощь.

Ура!

Answer 1

Я не знаю, как выглядят ваши ленты или классы изображений в CSS, но вы можете добавить класс теней к основному изображению, а не к контейнеру новостей.

<div class="news">
    <img class="image shadow" src="block.png">
    <img src="ribbon.png" class="ribbon">
</div>

Вот как выглядит мой пример в ie8 на win7: http://screencast.com/t/vIW5Egl4m

РЕДАКТИРОВАТЬ: Теперь, когда я вижу ваш JSFiddle, у меня есть лучшее представление о том, что вы хотите. Это должно сделать трюк:

https://jsfiddle.net/93mdg2y1/2/

Как вы можете видеть, вам нужно будет вставить другой контейнер в ваш новостной контейнер, чтобы получить желаемый эффект, так как фильтр ie8 скрывает любое переполнение своего контейнера.

<div class="news">
    <img src="http://dummyimage.com/379x376/5e7eff/fff&text=ribbon" class="ribbon">
    <div class="container shadow">
        <img class="image" src="http://dummyimage.com/379x376/e64100/fff&text=image">
        asdas
    </div>
</div>

И добавьте CSS к новому классу контейнера (вы должны выбрать лучшее имя)

div.container{
    position:relative;
    background:white;
    clear:both;
}

Кстати, вы должны использовать filter и -ms-filter вместе, если вы хотите использовать эту тень в более старых версиях ie.