IE6 支持a:hover 失效的问题
昨天一位QQ好友问了这样一个问题:
<style>
*{ margin:0; padding:0};
img{border:none;}
a:hover img{border:4px solid red;}
</style>
*{ margin:0; padding:0};
img{border:none;}
a:hover img{border:4px solid red;}
</style>
<body><a href="#"><img src="http://www.4738.com/uploads/allimg/110303/56-1103031132350-L.jpg"/></a></body>
在IE6鼠标悬停的时候 img 的样式并没有发生变化. 从代码上看,完全没有问题.
当时我也测试了一下. 的确没有效果. 由于工作的原因,没时间,所以就搁置到了今天.
刚才就重新对这个 demo 测试了一下. 当时也没有想到 是 haslayout 的问题.
在css森林群里发了一个demo . 一位同学给出了 a:hover{background:#ccc;} 的解决方案.
顿时想到 是不是 haslayout 引起的.
接着测试了下面两个属性.都可以实现
<style>
*{ margin:0; padding:0};
img{border:none;}
a:hover{overflow:hidden;}/*方法一*/
a:hover{zoom:1;}/*方法二*/
a:hover{background:#fff;}/*方法三*/
a img{ border:1px solid red; width:86px; height:86px;}
a:hover img{border:4px solid red; width:120px;}
</style>
*{ margin:0; padding:0};
img{border:none;}
a:hover{overflow:hidden;}/*方法一*/
a:hover{zoom:1;}/*方法二*/
a:hover{background:#fff;}/*方法三*/
a img{ border:1px solid red; width:86px; height:86px;}
a:hover img{border:4px solid red; width:120px;}
</style>
三个方法都可以实现效果.
也许以后的项目中会用到. 先记录下来.
如果您有更好的方案,也欢迎留言!!
