标签：lock 上市 variant isp pen 科技 convert text round
在自己写的一个轮播组件中遇到一个问题，使用jquery的fadeIn动画时，在IE11中表现不正常，没有渐入的效果。
1、HTML结构
<div class="mainpage-slideshow-top outerbox"> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img1.jpg" alt="爆品提前抢 最高减1500元"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img2.jpg" alt="乐Max2 购机送乐视会员"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img3.jpg" alt="潮饰国际范 满199减100"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img4.jpg" alt="OPPO新品上市 预售好礼专享"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img5.jpg" alt="12.12狂欢 满5000减300"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img6.jpg" alt="时尚腕表 大牌直降千元"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img7.jpg" alt="京东E卡 传递真情 表达心意"></a> <a href="#"><img src="img/mainpage/mainpage-slideshow-top-img8.jpg" alt="小米新品 拍照黑科技"></a> </div>
2、CSS
.mainpage-slideshow{ float: left; width: 790px; height: 480px; margin-left: 10px; } //使用jq添加的样式 $(".outerbox img").css({ position: ‘absolute‘, left:‘0‘, top:‘0‘ });
3、jquery
$(".outerbox >a").stop(true,true).eq(index).fadeIn(600).siblings(‘a‘).hide(400);
4、渐入渐出的效果在firefox，chrome中均正常，但是在IE11中无法出现渐入的效果。fadeIn是由opacity来实现的，IE11肯定是支持opacity的。
5、最后把目光放在了CSS上。我这里是<a>标签里嵌套<img>，这里并没有说明<a>的样式，会不会是这里的问题？
6、修改CSS样式，将$(".outerbox img")修改为$(".outerbox >a")后，问题得到解决，IE11也能正常显示渐入渐出了。
7、根据网上资料，这个问题类似于
如果fadeIn的元素的子元素有position属性时 以relative值为最严重 有position属性的元素不会出现fadeIn的效果！
https://my.oschina.net/noxiaomi/blog/195257
8、所以在以后遇到<a>标签里嵌套单个<img>并需要实现动画效果时，最好不要对img使用绝对定位进行布局，可通过对<a>声明样式实现布局。
标签：lock 上市 variant isp pen 科技 convert text round
原文地址：http://www.cnblogs.com/zczhangcui/p/6193544.html
