0

我遇到了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

这是预期的结果：

铬合金

编辑：在https://jsfiddle.net/xk3wz4fd/1/中添加了 jsfiddle

谢谢你的帮助。

干杯!

4

1 回答 1

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 。

于 2015-05-21T15:52:23.987 回答