首页 » "bug" 标签下的文章

IE6 中 a:hover 的bug

归类于 DIV+CSS 参与评论

前些时间,在做鼠标放到文字上面显示说明图片
<style type="text/css">
<!–
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:200px;height:25px;line-height:25px;text-align:center;border:1px solid #ccc;}
.info:hover {}
.info span {display: none }
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
–>
</style>

<a class="info" href="#"><span><img src="images/info.jpg" alt="说明图片" /></span>鼠标放到文字上面显示说明图片</a>

发现在FF下浏览是正常的,但是在IE6下却显示不正常,奇怪,检查了一下CSS没错呀!
那么到底是什么回事?
于是百度了一下,发现!原来a:hove在IE6中存在一个BUG,那就是:
a 与 a:hover 的css定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等

顶部