浏览器在opacity继承问题上的差异

2015-12-27 · 5 min read

这次说的不是什么大问题,但是出现问题后很难排查。最近一个项目用了大量的 CSS3 动画,使用 PostCSS 的 autoprefixer 自动加前缀,兼容 IE10 以上的所有浏览器,但是在 chrome 开发完毕,做兼容测试的时候,却发现 IE10、IE11 的 opacity 失效了。百思不得其解……

万幸的是并不是所有的 opacity 都失效了,对比生效和失效的代码,终于发现,IE10、11 和 chrome 等浏览器,在处理 opacity 的继承性问题上,存在差异。简单来说就是,父元素没有定位,子元素使用了定位属性 position(脱离文档流**),IE 下子元素不继承父元素的 opacity,而其他浏览器会继承**。

大家可以测试下面的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Opacity</title>
    <style>
      .parent {
        width: 100px;
        height: 100px;
        opacity: 0.5;
      }
      .child {
        width: 100px;
        height: 100px;
        background: #000;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>