如何阻止Internet Explorer的专有渐变过滤器切断应该溢出的内容？

Question

我正在使用我的CSS中的Internet Explorer渐变过滤器.

一切顺利,直到我注意到应该延伸到容器之外的图像overflow:visible;被剪裁,好像容器被设置为一样overflow:hidden;

我不知道为什么会这样,或者如何解决它.有人可以帮忙吗？

我在IE8和IE7中看它

这是导致问题的CSS,当我评论它时,没有更多的bug:

.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/).

Answer 2

这是有效的,虽然它是额外的标记.

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

这个策略有一个额外的好处,因为你可以添加多个渐变框并将它们的高度/宽度设置为父级的百分比,从而模拟safari/moz中允许的"颜色停止"行为.

例如:

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>