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

Question

我注意到在某些情况下无法在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不是透明的。 知道为什么吗？

Answer 1

在Internet Explorer 7、8、9中，非静态子元素不会继承父元素的不透明度。

解决方法：

IE9：给父级一个非静态位置。
IE8：让孩子继承过滤器样式。
IE7：让子级继承过滤器样式，并给父级一个非静态位置。

从这里链接：

http://www.jacklmoore.com/notes/ie-opacity-inheritance

Answer 2

将类与“ li”一起使用是不好的做法，因为它们旨在用于列出具有相似外观的类似信息，我假设MS选择忽略对不支持使用class8和id的ie8子元素的支持。

我建议使用伪类（在<= IE8浏览器上不会显示效果），或者如果您需要定位特定的li，则使用javascript。

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

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-11-07 11:58:00

解决方案2
0 2011-07-05 14:41:34

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

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-11-07 11:58:00

解决方案2 0 2011-07-05 14:41:34

解决方案1
5 已采纳 2012-11-07 11:58:00

解决方案2
0 2011-07-05 14:41:34