万恶的 ie6 之 a:hover-优快云博客

本文介绍了一个IE6浏览器中的a:hover样式不生效的问题及其解决方案。通过在a:hover中添加如background:none等特定CSS属性，可以解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中又碰到棘手的ie6问题。

在 ie7,ff中都正常，ie6中 a:hover竟然神奇的不管用了。再试了N种办法后，竟然发现在a:hover 上添加 background：none，竟然可以了。

上网搜了下，原来是：
[url]http://www.w2blog.net/view/353.html[/url]
所以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 …… 等等。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a:hover</title>
<style type="text/css">
	a{display:block;height:170px;margin-bottom:30px}
	a img{display:none;border:none}
	a:hover img{display:block}
	.test:hover{background:none}
	.bgtest:hover{border:none}

	.bg{background:transparent url(http://www.google.cn/logos/olympics10-bg.jpg) repeat-x scroll center center;}
</style>

</head>

<body>
<a href="http://g.cn" >
	google
	<img src="http://www.google.cn/logos/olympics10-nordic-hp.png" alt='google'/>
</a>

<a href="http://g.cn" class="test">
	google
	<img src="http://www.google.cn/logos/olympics10-nordic-hp.png" alt='google'/>
</a>


<a href="http://g.cn" class="bg">
	<img src="http://www.google.cn/logos/olympics10-nordic-hp.png" alt='google'/>
</a>

<a href="http://g.cn" class="bg bgtest">
	<img src="http://www.google.cn/logos/olympics10-nordic-hp.png" alt='google'/>
</a>
</body>
</html>