html - 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。