我如何阻止Internet Explorer的适当的渐变过滤器从切断应该溢出的内容？ [英] How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

问题描述

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

I'm using the internet explorer gradient filter in my CSS.

这是一切顺利，直到我注意到， code> overflow：visible; 正在被裁剪，好像容器设置为 overflow：hidden;

It was all going well until I noticed that images that are supposed to extend beyond their containers overflow:visible; are getting clipped as though the container was set to overflow:hidden;

我不知道为什么会发生这种情况，或者如何解决它。任何人都可以帮忙？

I have no idea why this would happen, or how to fix it. Can anyone help?

我在IE8和IE7上查看它

I'm looking at it in IE8 and IE7

问题，当我注释掉，没有更多的错误：

This is the css causing the issue, when I comment it out, no more 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 */
}

推荐答案

虽然是额外的标记。

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

My content

</div>

这个策略有一个奖励，你可以添加多个渐变框并设置它们的高度/宽度

There is a bonus to this tactic, as you can add multiple gradient boxes and set their heights/widths as a % of the parent, thus emulating the "colour stop" behaviour allowed in 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>

这篇关于我如何阻止Internet Explorer的适当的渐变过滤器从切断应该溢出的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！