注意:opacity和position:absolute在IE中的特殊表现

    jwolf 
1428  0  0   2016-3-1 8:59


最近实现一个前端项目遇到这样的业务需求:动态修改一个元素的透明度,初始的想法很简单:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

把parent设置为opacity:0, 根据情况把子元素(child1,child2 or child3)中某一个的opacity修改为1,加上:

transition-duration:50ms;
transition-delay: 200ms;
transition: all 320ms ease 240ms;

渐变切换的效果就出来了,这一切在非IE中表现正常,然而,在IE上却发现,初始在parent中设置的opacity不生效,子元素中用到了一个属性:

position:absolute

当把这个属性去掉的时候,父类的opacity在子元素也是有效果的,但是加上上面的属性就不生效了,网上查了下资料解决方案有两个:

1,把子元素统一设置一个class="child", 个性化的设置就通过添加类来实现也就是改成:

<div class="parent">
    <div class="child first"></div>
    <div class="child second"></div>
    <div class="child third"></div>
</div>

使用.child.first设置个性化的属性,初始化透明度设置就不用通过parent,直接通过child类,避开了在IE上的问题。

2,第二种方法需要感谢这个帖子:点击这里 ,在parent元素中设置一个属性:position:relative,子元素就继承父元素的opacity了。


标签