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

我注意到在某些情况下，表单元素不能在IE8中变得透明。原来取决于位置：相对CSS标签。下面的HTML演示问题：在IE8中的不透明度取决于位置：相对

<!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是不透明的。任何想法为什么？

来源

2011-03-25 Peter Szanto

这是不是一个真正的答案（对不起），但它在某些如果不是所有的浏览器是常见的（虽然我更MSIE看到它在多宗）除非“位置：相对”，否则某些造型属性不适用。明确定义在一个元素上。我一直认为它主要是出于向后兼容的原因（当不是扁平化错误时）。 – 2011-03-25 14:29:10