Question

我注意到在某些情况下，IE8中的表单元素不能透明。结果取决于位置：相对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选择忽略对ie8使用类和＆amp;的子元素的支持。 id不应该。

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

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

2 个答案: