title: IE8 bug? div with height, position:absolute, and opacity doesn't display correctly
body: <p>I'm having a CSS problem in IE8. The full height of .test_div is not showing when I add an opacity in #header. But the full height of .test_div will show when I remove the opacity.</p>
  
  <p>This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?</p>
  
  <p>Thank you!! :)</p>
  
  <p>The code is also here:
  <a href="http://jsfiddle.net/VPkXu/" rel="nofollow">http://jsfiddle.net/VPkXu/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div class="test_div"&gt;test square&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header {
      position:absolute;
      z-index:10;
      height:100px;
      width:300px;
      background: #888;
      /* remove the lines below, the full height of .test_div will be visible (IE8)*/
      opacity: 0.7;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
      filter:alpha(opacity=70);
  }
  
  .test_div {
      background:#CCC;
      height:500px;
      width:200px;
  }
  </code></pre>