IE8 中的不透明度取决于位置：相对
我注意到在某些情况下，IE8 中的表单元素无法变得透明。事实证明，它取决于position:relative CSS 标签。下面的 HTML 演示了该问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
.ie-opaque {
zoom : 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.relative {
position: relative;
}
</style>
</head>
<body>
<div class="ie-opaque">
<form>
<fieldset>
<ol>
<li class="relative">
<label for="test">label</label>
<input id="test"/>
</li>
<li class="relative">
<button>push</button>
</li>
<li>
<label for="test">label</label>
<input id="test"/>
</li>
<li>
<button>push</button>
</li>
</ol>
</fieldset>
</form>
</div>
</body>
</html>
在 IE8 中，第 3 项和第 4 项是透明的，而第 1 项和第 2 项则不是。知道为什么吗？
I noticed that in some cases form elements cannot be made transparent in IE8. It turned out to depend on the position:relative CSS tag. The below HTML demonstrates the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
.ie-opaque {
zoom : 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.relative {
position: relative;
}
</style>
</head>
<body>
<div class="ie-opaque">
<form>
<fieldset>
<ol>
<li class="relative">
<label for="test">label</label>
<input id="test"/>
</li>
<li class="relative">
<button>push</button>
</li>
<li>
<label for="test">label</label>
<input id="test"/>
</li>
<li>
<button>push</button>
</li>
</ol>
</fieldset>
</form>
</div>
</body>
</html>
In IE8 items 3 and 4 are transparent, 1 and 2 are not. Any idea why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在 Internet Explorer 7、8、9 中，非静态子元素不会继承父元素的不透明度。
解决方法：
从这里链接：
http://www.jacklmoore.com/notes/ie-opacity-inheritance
In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent.
Workarounds:
Linked from here:
http://www.jacklmoore.com/notes/ie-opacity-inheritance
使用带有“li”的类是不好的做法，因为它们旨在列出具有相似外观的类似信息，我假设 MS 选择忽略对使用类和 ie8 的子元素的支持。 id 不应该。
我建议使用伪类（效果不会在 <= IE8 浏览器上显示），或者如果您需要针对特定的 li，则使用 javascript。
Using classes with "li" is bad practice as they were designed for listing similar information with a similar appearance, I'm assuming MS chose to ignore support for child elements with ie8 that use classes & id's that shouldn't.
I would suggest using pseudo classes (effects won't show on <=IE8 browsers), or javascript if you need to target specific li's.