IE 8不透明度会影响所有子元素

Question

I have a div I want to set an opacity on. 我有一个要设置不透明度的div。 I have the following CSS: 我有以下CSS：

background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, .7);
filter: alpha(opacity=70); /* IE 7 and Earlier */
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

Works fine in compliant browsers but in IE 8 this also makes child elements with the div transparent. 在兼容的浏览器中工作正常，但在IE 8中，这也使div的子元素透明。

I am aware this question is closely related to this one but the answers there didn't work for me. 我知道这个问题是密切相关的这一个，但答案有没有为我工作。

Would anyone have any suggestions? 有人有什么建议吗？

Thanks! 谢谢！

Answer 1

IE8 doesn't support RGBa, and the MS Filter opacity will effect the element and it's children. IE8不支持RGBa，MS滤镜的不透明度会影响该元素及其子元素。

Suggested fix from http://css-tricks.com/rgba-browser-support/ 来自http://css-tricks.com/rgba-browser-support/的建议修复

<!--[if IE]>

   <style type="text/css">

   .color-block { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    } 

    </style>

<![endif]-->

OR (using conditional classes) 或（使用条件类）

<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

   .ie8.your-selector { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    }

OR 要么

another way to get around this is to use a 1px by 1px transparent png that repeats as the background image for the element.. 解决此问题的另一种方法是使用1px x 1px的透明png，该元素重复作为元素的背景图像。

IE 8不透明度会影响所有子元素

问题描述

1 个解决方案

解决方案1
1 2013-01-31 00:09:51

IE 8不透明度会影响所有子元素

问题描述

1 个解决方案

解决方案1 1 2013-01-31 00:09:51

解决方案1
1 2013-01-31 00:09:51