IE8 中的不透明度取决于位置：相对
Posted
技术标签:
【中文标题】IE8 中的不透明度取决于位置：相对【英文标题】：opacity in IE8 depends on position:relative 【发布时间】：2011-07-22 20:12:48 【问题描述】：我注意到在某些情况下，表单元素在 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 项不是。知道为什么吗？
【问题讨论】：
这不是一个真正的答案（抱歉），但在某些（如果不是所有）浏览器中很常见（尽管我在奇怪的情况下在 MSIE 中看到更多），除非“位置：相对；"在元素上明确定义。我一直认为这主要是出于向后兼容性的原因（当不是一个彻底的错误时）。 【参考方案1】：在 Internet Explorer 7、8、9 中，非静态子元素不会继承父元素的不透明度。
解决方法：
IE9：给父级一个非静态位置。 IE8：让孩子继承过滤器样式。 IE7：让子级继承过滤器样式并给父级一个非静态位置。从这里链接：
http://www.jacklmoore.com/notes/ie-opacity-inheritance
【讨论】：
这是一个老问题，我什至不记得我需要哪个项目，但听起来很有说服力，所以我给了你一个赞成票。 @PeterSzanto - 我认为这个答案应该被标记为已接受 - 我有同样的问题，这个答案解决了它。 谢谢 - 我知道这是不久前的事了，但这就是为什么我认为这将是一个好主意，因为许多用户仍在为 IE 苦苦挣扎（就像我在某些项目中一样）。【参考方案2】：使用带有“li”的类是不好的做法，因为它们旨在列出具有相似外观的相似信息，我假设 MS 选择忽略对 ie8 子元素的支持，这些子元素使用不应该使用的类和 id。
如果您需要针对特定的 li，我建议使用伪类（效果不会在
【讨论】：
以上是关于IE8 中的不透明度取决于位置：相对的主要内容，如果未能解决你的问题，请参考以下文章