浏览器在 opacity 继承问题上的差异
2015-12-21 · 282 chars · 2 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>
