IE8/IE9 Bug - Неожиданное поведение при использовании IE фильтры

Question

Я создал 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> 

... и вторым блоком с точно таким же кодом, за исключением того, что класса = «жидкость» изменен на класс = "жидкость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; 
} 

Так "жидкость" имеет прочную основу в то время как "fluid2" имеет фоновый градиент с помощью IE фильтра свойство фильтра »: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# d3dadb', endColorstr = '# FFFFFF', GradientType = 0)»

результат (снимок экрана): http://s14.postimage.org/v8qn1wvin/iebug.jpg

«жидкость2», хотя прозрачная не распространяется на ее высоту контейнера.

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

Answer 1

Вы должны применить градиент к контейнеру: updated fiddle