当前位置：首页 → 问答吧 → ie 下 filter:alpha(opacity=90) 导致外层遮住内层偏移(margin负值)部分

ie 下 filter:alpha(opacity=90) 导致外层遮住内层偏移(margin负值)部分

时间：2011-06-14

来源：互联网

网页代码如下：

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<style>
div{
    margin:auto;
}
</style>
</head>
<body>
<div id="out" style="background:#999999;position: absolute; z-index: 100000; overflow: visible; left: 50%; top: 228.5px; margin-top: -49px; margin-left: -100px; width: 178px; height: 85px;filter:alpha(opacity=90);opacity=0.9">
    <div id="in" class="windown-box" style="width: 168px; margin-left: -4px; 
margin-top: -4px; height: 75px; background: none repeat scroll 0% 0% rgb(255, 255, 255); 
border: 5px solid rgb(233, 243, 253);position:relative;z-index100001">
    测试
    </div>
</div>
</div>
</body>
</html>

问题描述：
ie下（已测ie7,ie8）
内层div #in margin-left:-4px margin-top:-4px; 偏移4个像素。
但是在外层div #out css含有 filter:alpha(opacity=90);时内层偏移出的内容被遮挡，无法显示。去掉filter则可正常显示。

请问：
filter属性必须有的情况下。怎么能让偏移的那部分正常显示。
求解！！！

作者: yymimang 发布时间: 2011-06-14

没人回复？崩溃...

作者: yymimang 发布时间: 2011-06-15

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
#content{
    position:relative;
    width:178px;
    margin:0 auto;
    top: 228.5px;
}
#out{
background:#999;
position: position; 
z-index: 100000;
margin:0 auto;
width: 178px; 
height: 85px;
filter:alpha(opacity=90);
opacity=0.9
}
.windown_box{
border: 5px solid rgb(233, 243, 253);
background-color:white;
color:#000;
width: 168px; 
left:-4px;
top:-4px;
height: 75px; 
position:absolute;
z-index:100001;
}

</style>
</head>
<body>
<div id='content'>

<div id="out">
    
</div>

<div id="in" class="windown_box" >
    测试
    </div>

</div>
</body>
</html>