IE 7 - 当为具有绝对位置的 DIV 设置不透明度时，它的子 div 消失
我有一个 div 的位置设置为绝对，其中有几个 div。一旦我向该 div 添加不透明度过滤器，即使不透明度设置为 100，子 div 也会在 IE7 中消失。
如果我通过 jQuery 更改不透明度，即使没有绝对位置，也会发生同样的事情。
有人知道修复方法吗？
提前谢谢
示例
<style type="text/css">
#wrap {
opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(Opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.5;
position:absolute;
}
#sub1 {
position:absolute;
width:200px;
height:200px;
background-color:#F00;
}
</style>
<div id="wrap">
<div id="sub1"></div>
</div>
如果 wrap 具有不透明度和绝对位置，则 sub1 在 IE7 中不可见
第二种情况：
#wrap {
position:absolute;
width:500px;
height:500px;
color:#fff;
filter: alpha(Opacity=100);
}
#sub1 {
position:absolute;
}
#sub2_bg {
width:500px;
height:500px;
background-color:#000;
position:absolute;
filter: alpha(Opacity=50);
}
#sub2_text {
position:absolute;
}
</style>
<div id="wrap">
<div id="sub1">
<div id="sub2_bg"></div>
<div id="sub2_text">sample text</div>
</div>
</div>
在这种情况下，一旦wrapp 具有过滤器，sub2_text 内的文本“示例文本”的 alpha 透明度就会达到 50%，即使它是不透明度=100。显然，我可以删除 alpha(opacity=100)，但当我将环绕的不透明度动画设置为 0.5 并返回到 1 时，会出现同样的问题，因为这样 div 就会获得过滤器。我注意到只有下面有 alpha 透明 div 的部分才会出现此问题，如果文本大于 sub1_bg，则只有 sub1_bg 顶部的部分会受到影响。同样仅适用于 IE 7。
如果有人也能向我展示解决该问题的方法，那就太好了。谢谢。
I have a div with position set to absolute and a few divs inside of that. As soon as I add an opacity filter to that div even if opacity is set to 100 the child divs disappear in IE7.
The same thing happens if I change the opacity via jQuery even without position absolute.
Does anybody know a fix?
Thank you in advance
Example
<style type="text/css">
#wrap {
opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(Opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.5;
position:absolute;
}
#sub1 {
position:absolute;
width:200px;
height:200px;
background-color:#F00;
}
</style>
<div id="wrap">
<div id="sub1"></div>
</div>
If wrap has opacity and position absolute, sub1 is invisible in IE7
Second scenario:
#wrap {
position:absolute;
width:500px;
height:500px;
color:#fff;
filter: alpha(Opacity=100);
}
#sub1 {
position:absolute;
}
#sub2_bg {
width:500px;
height:500px;
background-color:#000;
position:absolute;
filter: alpha(Opacity=50);
}
#sub2_text {
position:absolute;
}
</style>
<div id="wrap">
<div id="sub1">
<div id="sub2_bg"></div>
<div id="sub2_text">sample text</div>
</div>
</div>
In that scenario the text "sample text" inside sub2_text has an alpha transparency of 50% as soon as wrap has a filter even if it is opacity=100. Obviously I could remove alpha(opacity=100) but the same problem appears when I animate the opacity of wrap to .5 and back up to 1, because then the div gets a filter. I noticed that only the parts that have an alpha transparent div below that have this issue, if the text was larger than sub1_bg only the parts on top of sub1_bg would be affected. Again only in IE 7.
Would be nice if someone could show me a fix for that too. Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
原因是 #wrap 现在不再包含绝对定位元素。您应该指定其宽度/高度，如下所示。
以前#wrap 不会切断该内容，但当您应用过滤器时，它会切断该内容。这就像在你的#wrap 上贴了一个overflow:hidden 。
更新：
要解决此问题，请在页面上设置严格的文档类型。
另外，将以下内容添加到 CSS 中，以便您的孩子继承之前不透明度 50% 的滤镜样式。
The reason is because the #wrap is now no longer containing your absolute positioned element. You should specify a width/height on it like the following.
Previously #wrap wasn't cutting that content off, but when you applied the filter it cuts that content off. It's like sticking an overflow:hidden on your #wrap.
Update:
To fix this set a strict doctype on your page.
Also, add the following to the CSS for your children to inherit the previous filter style of the opacity 50%.