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

【问题标题】：IE 8 Opacity affects all child elementsIE 8 不透明度影响所有子元素
【发布时间】：2013-01-31 08:27:51
【问题描述】：

我有一个要设置不透明度的 div。我有以下 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);

在兼容的浏览器中运行良好，但在 IE 8 中，这也使带有 div 的子元素变得透明。

我知道这个问题与this one 密切相关，但那里的答案对我不起作用。

有人有什么建议吗？

谢谢！

【问题讨论】：

这是预期的功能。更改元素的不透明度意味着其中的任何内容也会受到影响。
我认为 RGB 值会将其限制为父元素？您是否建议 IE8 不能限制受影响的元素数量？
@MeltingDog 层叠样式表；如果你让父母透明，孩子也会。项目不能比它们所在的元素更多可见。
@MeltingDog 把它想象成你在车里有一些座位和一个方向盘。如果您将汽车的不透明度设置为 50%，您会期望完全看穿汽车，还是期望看到座椅和方向盘，就好像汽车的其余部分正在消失一样？那将是一个非常奇怪的效果。

标签： css internet-explorer internet-explorer-8 opacity

【解决方案1】：

IE8 不支持 RGBa，MS 过滤器不透明度会影响元素及其子元素。

来自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（使用条件类）

<!--[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;
    }

或

解决此问题的另一种方法是使用 1px x 1px 透明 png 重复作为元素的背景图像..

【讨论】：

您可以尝试文章底部的“修复”。
听起来不错！那么对于上面的“if”语句，它必须在我的 HTML 文件中吗？有没有办法把这个 if 语句放在我的外部 CSS 文件中？
是的。如果您在 HTML 标记上使用 HTML5boilerplate.com 或条件，您可以通过条件访问 ie 类。我会更新我的答案。