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

这次说的不是什么大问题,但是出现问题后很难排查。最近一个项目用了大量的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: .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>



标签: , , ,

无觅相关文章插件,快速提升流量