IE8: CSS opacity filter results font color to become the same as the background div's background color

I've encountered a very strange bug: there's a div (#inner) placed inside an other (#container). If I giv开发者_如何学Ce 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.

Does anyone met this behavior before?

The site with the problematic CSS: http://beta.sminktanfolyamok.hu

The CSS parts of these sections:

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);
}

The solution was the same as for the ClearType bug: I've added

 position:relative

to all the related layers, and the problem is solved.