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

这是预期的结果：

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

中添加了jsfiddle

感谢您的帮助。

干杯！

Answer 1

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

<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添加到新容器类中（您应该选择一个更好的名称）

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

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