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

Question

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

Pet*_*nto 2 javascript opacity internet-explorer-8

我注意到在某些情况下,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>

Run Code Online (Sandbox Code Playgroud)

在IE8中,项目3和4是透明的,1和2不是.知道为什么吗？

Answer 1

Chr*_*les 5

在Internet Explorer 7,8,9中,非静态子元素不会继承父级的不透明度.

解决方法:

IE9:给父母一个非静态位置.
IE8:让孩子继承过滤器样式.
IE7:让孩子继承过滤器样式并给父母一个非静态位置.

从这里链接:

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

归档时间：	14 年，10 月前
查看次数：	2024 次
最近记录：	13 年，2 月前