次のコードで 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"に変更されていることを除いて、まったく同じコードの 2 番目のブロック。
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」はクリアですが、コンテナの高さまで伸びていません。
Jsfiddle: http://jsfiddle.net/waGEk/1/