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