IE 问题 - 阴影通过容器边界切割图像

Question

我在使用 IE8 时遇到问题。我得到了一个丝带 IMG 而不是另一个。当我投影两个 IMG 的容器 DIV 时，绝对定位的色带被容器边界切断。

这是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 中的结果：

IE8

这是预期的结果：

Chrome

编辑：在 https://jsfiddle.net/xk3wz4fd/1/

中添加了 jsfiddle

感谢您的帮助。

干杯！

Answer 1

我不知道你的功能区或图像 class 在 css 中是什么样子，但你可以将阴影 class 添加到主图像而不是新闻容器。

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

这是我的例子在 win7 上的 ie8 中的样子： 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添加到新容器class（你应该取一个更好的名字）

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

顺便说一句，如果你想在旧版本的 ie 中使用那个投影，你应该同时使用 filter 和 -ms-filter。

IE 问题 - 阴影通过容器边界切割图像

IE issue - Drop shadows cuts image by conteiner borders

html

css

drop-shadow

internet-explorer-8

dropshadow