最近在项目中遇到一个问题,就是a的伪类hover的样式在其他浏览器中都是有效的,但在IE6浏览器中却失效。
问题描述:
【HTML结构】<a class="img_container"><img src="" /></a>
【CSS 样式】.img_container:hover img{..}
问题分析:
【是否hasLayout的原因】通过激发img的hasLayout属性依然没有效果
【是否IE6的bug】查阅资料发现很多同学都遇到过这个问题,具体原因引用他们的话是IE6的类使用是要从祖先开始查看。查看什么呢?查看祖先类是否定义。那么在这里我们发现.img_container:hover之前是没有定义过的。
解决方法:
【定义伪类】在使用的时候定义一个伪类样式.img_wrapper:hover{}
【加入样式】在伪类括号里面加入overflow:hidden或者backgrou:#fff,类似的样式,刷新,OK。
使用如下:
.img_container:hover {overflow:hidden;}
.img_container:hover img{border:red;}
先记录下来吧,有时间再细细推敲原因。