有没有办法让不透明度适用于ie8中的绝对定位子元素答案

【问题标题】：Is there any way to have opacity apply to absolutely positioned child elements in ie8有没有办法让不透明度适用于ie8中的绝对定位子元素
【发布时间】：2011-09-02 22:56:59
【问题描述】：

在大多数浏览器中，当一个 html 元素只是部分不透明时，它的子元素会“继承”这种不透明性。（这不完全是继承——更准确地说，整个图像被组装起来，包括父级及其子级递归，然后将不透明度应用于整个事物。）

在 IE8 中（我也假设对于早期版本的 IE），不透明度并不总是会发生这种情况。如果子元素具有 position:static （如果没有指定位置，则为默认值），那么它确实像我上面描述的那样工作。但是，如果将位置设置为其他任何值（例如，绝对或相对），那么子元素似乎是完全不透明的。

我想知道如何使不透明度正确地影响父元素和子元素，但仍然保持子元素的位置：绝对；

这是一个问题的例子。下面的代码应该在一个垂直的红色条的顶部制作一个半透明的灰色框，周围有一个半透明的蓝色区域。在 Firefox、Chrome 等上，这是实际看到的。在 IE8 上，蓝色框是正确半透明的，但灰色部分是不透明的。

<!doctype html>
<html>
  <head>
    <style>
      div.parentElem
      {
        background-color:#0000ff;
        position: absolute;
        left:75px;
        top:75px;
        width:300px;
        height:225px;        
        opacity:0.5;
        filter:alpha(opacity=50);
      }
      div.childElem
      {
        background-color:#808080;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
      }
      div.redBar
      {
        position: absolute;
        left:150px;
        top:50px;
        height:350px;
        width:25px;
        background-color: #ff0000;        
      }
    </style>
  </head>
  <body>
    <div class="redBar"></div>
    <div class="parentElem">
      <div class="childElem"></div>
    </div>
  </body>
</html>

显然，这只是一个玩具示例——我可以有一个带有蓝色边框和灰色背景的 div 来达到预期的效果。在真实场景中，我将几个不同的 div 分层，每个 div 都有一个 png 背景图像来动态构建图像。

我第一次尝试的解决方法是将不透明度应用于父级和子级，方法是将子级的过滤器设置为 alpha(opacity=50);或简单地设置过滤器：继承；。这并没有达到预期的效果，因为它会生成一个半透明的蓝色矩形，上面有一个半透明的灰色矩形。中间的空白空间最终是半透明的蓝灰色，而它应该是半透明的灰色。同样，使元素成为兄弟也不起作用。任何解决方案都需要在对任何内容应用任何透明度之前合成两个图像。

在我的研究中，我发现了一些应用 zoom:1; 的建议。或浮动：无；到内部元素可能会解决问题，但对我来说都不起作用。

我最终的解决方法是给子元素位置：静态。这是一种丑陋的解决方案，但我将其应用于上述示例的方法是将子元素的样式更改为：

  div.childElem
  {
    background-color:#808080;
    position:static;
    margin-left:10px; 
    margin-right:10px;
    height:205px;
    margin-top:10px;
  }

这是一种丑陋的解决方案，因为这意味着我必须知道对象的高度。此外，在实际情况下，我正在编写几个不同的 png，并且我希望它们成为逻辑上的兄弟姐妹，我必须将它们全部放在嵌套的父子孙子等中。关系。它还阻止我添加任何文本元素，除了堆栈的最顶部（最里面的 div），而不会弄乱定位。不过，它确实有效，而且在所有浏览器中看起来都一样。

有没有什么办法可以避免这种可怕的解决方法，让不透明度正确地影响子元素而不使位置静态？谢谢！

【问题讨论】：

标签： css internet-explorer parent-child opacity css-position

【解决方案1】：

div.parentElem *{filter:inherit;}

见：

http://seanmonstar.com/post/709013028/ie-opacity-ignores-positioned-children

【讨论】：

【解决方案2】：

为 div.childElem 指定除高度之外的宽度。在你的情况下：

width:280px;

可能与好的 ol' hasLayout 有关。

【讨论】：

这很好，但恐怕它没有成功。我添加了一些 javascript 来向我展示内部元素的 .style.hasLayout。好像没有关系：
我可以生成不透明度工作/损坏和 hasLayout true/false 的所有四种组合。（位置：静态，指定高度提供 hasLayout 真实和不透明度工作；位置：绝对（有或没有宽度和高度）产生 hasLayout 真实和不透明度；位置：静态和没有高度/宽度提供 hasLayout 假和不透明度工作；位置：相对并且没有尺寸提供 hasLayout false 和不透明度损坏。）

【解决方案3】：

由于只有 IE 理解 filter 规则，当您知道它们被定位时，您可以在子元素上使用它... 我没有找到“正确”的解决方案 =/

【讨论】：

【解决方案4】：

我能够找到一种方法将不透明度正确应用于绝对定位的孩子。当我不给页面提供任何文档类型时，不透明度就会正确应用。实际上，因为这会迫使浏览器进入怪癖模式，所以它通常不是一个可行的解决方案。

【讨论】：

根据我的研究，我能得出的最佳结论是，您根本无法在 IE8（和 Ie

【解决方案5】：

对您的问题的小修正。这种奇怪的行为仅在 IE8 中发生。 IE7 和 IE9 都显示了预期的行为（其中子元素首先覆盖在父元素上，然后整个复合组都应用了过滤器）。当父元素是 position:relative 时 IE8 也会被破坏（并且当子元素是绝对或相对时）。

【讨论】：

【解决方案6】：

简短回答：在子元素上设置所需不透明度的 alpha 过滤器。

这里有一个详细的例子说明： http://jacklmoore.com/notes/ie-opacity-inheritance/

【讨论】：

【解决方案7】：

我已经取得了一些成功

selector {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    z-index: -1;
}

我使用的是 -1，因为它似乎不会像正 z-index 那样混淆 z-ordering，但据我发现，任何非自动/继承/0 z-索引有效。

【讨论】：