IE8 中的不透明度取决于位置：相对答案

【问题标题】：opacity in IE8 depends on position:relativeIE8 中的不透明度取决于位置：相对
【发布时间】：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 中看到更多），除非“位置：相对；"在元素上明确定义。我一直认为这主要是出于向后兼容性的原因（当不是一个彻底的错误时）。

标签： javascript internet-explorer-8 opacity

【解决方案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，我建议使用伪类（效果不会在

【讨论】：