CSS透明度在IE11

我试图做一个tr不透明本CSS的background-color不工作：CSS透明度在IE11

.faded{ 
    background-color: red; 
    height: 100px; 
    opacity: 0.4; 
    filter: alpha(opacity=50); 
}

这里是我的测试HTML：

<table> 
    <tr class="faded"> 
     <td><div>testtesttesttestt</div></td> 
     <td><div>testtsttesttesttt</div></td> 
    </tr> 
</table>

一切正常，在IE9 ，10 FF24 Chrome 31+，但IE11不支持。 请注意，我不关心表格行的内容，只关注背景不透明度。截图和Jsfiddle下面。

IE10： IE10

IE11： IE11

那么，这是怎么回事吗？

编辑2：此错误是由微软

编辑3证实：微软已经搬到这个bug到一个新的位置： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

这似乎是又一个IE bug。作为解决方法，你可以改为添加opacity通过rgba()颜色的背景属性。然后只需将不透明度添加到td元素。

Updated Example - 结果在浏览器中看起来是一致的。

.faded { 
    background-color: rgba(255, 0, 0, 0.4); 
    height: 100px; 
} 
td { 
    opacity:0.4 
}

2014-05-06 21:05:49

这确实在IE11的工作。我从后面的代码中生成了HTML，并且在元素上设置一个类而不是为不同颜色的多个CSS类更容易。 – ToastyMallows

@ ToastyMallows是的，这听起来像一个痛苦。我相信你已经意识到了这一点，但你可以将'opacity'应用于'table'元素 - 这似乎在IE中工作.. http://jsfiddle.net/NSc32/ –

我需要能够使一些行不透明，并且一些行不透明。但是，谢谢你的建议，这将是一个很好的解决办法。 – ToastyMallows

此行添加到您的HTML的头，不透明度将正常工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2016-12-06 17:49:04 JSON

回答