html - IE8/IE9错误-使用IE过滤器时出现意外行为

我用以下代码创建了一个html块：

<div class="container">
    <div class="float">info<br/>info<br/>info</div>
    <div class="fluid">
        <div class ="fluidinner">
            <div class="text">one two</div>
            <div class="cleardiv"></div>
        </div>
    </div>
</div>

...以及具有完全相同代码的第二个块，只是这次将class =“ fluid”更改为class =“ fluid2”。

CSS是：

.float {
    background-color:pink;
    width:100px;
    float:left;
}
.fluid {
    background-color:#d3dadb;
    padding:5px;
}
.fluid2 {
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3dadb', endColorstr='#ffffff',GradientType=0 );
    padding:5px;
}
.fluidinner {
    background-color: gray;
}
.cleardiv {
    clear:both;
}

因此，“ fluid”具有坚实的背景，而“ fluid2”具有使用IE过滤器属性“ filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃d3dadb'，endColorstr ='＃ffffff'，GradientType = 0”的背景渐变）

结果（屏幕截图）：http://s14.postimage.org/v8qn1wvin/iebug.jpg

“ fluid2”尽管透明但不会扩展到其容器的高度。

Jsfiffle：http://jsfiddle.net/waGEk/1/

最佳答案

您需要将渐变应用于容器：updated fiddle