title: Div Transparency Doesn't Work in IE8
body: <p>I have an overlay div that is a child of the body tag The div's background should be transparent white and I would prefer to not fake it with a png. I have the following sass:</p>
  
  <pre><code>.my-overlay
      @include opacity(0.6)
      background: #fff
      position: absolute
      top: 0
      left: 0
  </code></pre>
  
  <p>This compiles to:</p>
  
  <pre><code>.my-overlay
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
      opacity: 0.6;
      background: white;
      position: absolute;
      left: 0;
      top: 0;
  </code></pre>
  
  <p>I also have the following</p>
  
  <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  </code></pre>
  
  <p>Transparency works in Chrome, Safari and FF but not IE8. In IE8, the div's background is rendered opaque white (I'm testing in XP/IE8/VMWare on OS X). It doesn't work in compatibility mode either.</p>
  
  <p>I also tried manually changing filter to -ms-filter, which had no effect.</p>
  
  <p>The IE8 developer toolbar shows the filter property has been applied to the div with the correct value, and hasLayout is -1. What could I be overlooking that's preventing transparency in IE8?</p>