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。