title: IE8: CSS opacity filter results font color to become the same as the background div's background color
body: <p>I've encountered a very strange bug: there's a div (#inner) placed inside an other (#container). If I give opacity to the inner element in IE8, the font color of the inner div (#inner) will become the same as the background-color of the outer (#container) element.</p>
  
  <p>Does anyone met this behavior before?</p>
  
  <p><strike>The site with the problematic CSS: <a href="http://beta.sminktanfolyamok.hu" rel="nofollow">http://beta.sminktanfolyamok.hu</a></strike></p>
  
  <p>The CSS parts of these sections:</p>
  
  <pre><code>div#container {
      width: 940px;
      margin-left: auto;
      margin-right:auto;
      border:1px solid #ccc;
      box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
      -moz-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
      -khtml-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
      -webkit-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
      position:relative;
      padding-left:10px;
      padding-right:10px;
      padding-top:1em;
      background-image:url('images/navigation.jpg');
      background-repeat:no-repeat;
      background-position:center left;
      background-color: #000;
  }
  
  div#inner {
      background-color: #999;
      color:#222;
      opacity: 0.7;
      -moz-opacity: 0.7;
      -khtml-opacity: 0.7;
      -webkit-opacity: 0.7;
      filter:alpha(opacity=70);
  }
  </code></pre>