css - 如何阻止 Internet Explorer 的适当梯度过滤器切断应该溢出的内容？

Question

我在我的 CSS 中使用了 Internet Explorer 渐变过滤器。

一切都很顺利，直到我注意到本应超出其容器 overflow:visible; 的图像正在被裁剪，就好像容器被设置为 overflow:hidden;

我不知道为什么会发生这种情况，也不知道如何解决。谁能帮忙？

我在IE8和IE7中查看

这是导致问题的 css，当我将其注释掉时，不再有错误:

.box{
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */
}

Answer 1

这可能会帮助那些选择放弃对 IE7 的支持的人。

如果元素被定位(相对/绝对/固定)，IE7 总是会出问题。在 IE8+ 中，如果 z-index 设置为 auto，问题就会消失。

如果您需要支持 IE7，或者如果您需要使用 z-index 堆叠东西，您必须满足于第二个包装 DIV。

<div class="position_me_and_stack_me_with_z-index">
  <div class="give_me_a_filter">
    Content goes here
  <div>
</div>

编辑 2012-05-29:我创建了一个示例来展示如何解决这个问题。我创建了这个示例来解决 z-index 堆叠问题......它恰好也解决了这个问题(http://jsfiddle.net/ryanwheale/gz8v3/)。