关于IE6下a标签的a:hover伪类失效的问题

最近在项目中遇到一个问题,就是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;}


先记录下来吧,有时间再细细推敲原因。

你可能感兴趣的:(html,浏览器,IE,Class,border,wrapper)