浏览器在 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,而其他浏览器会继承。