`
wzg489326
  • 浏览: 46949 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

万恶的 ie6 之 a:hover

GoogleCSSXHTMLHTML.net 
阅读更多
  工作中又碰到棘手的ie6问题。

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

  上网搜了下，原来是：
   http://www.w2blog.net/view/353.html
   所以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>
分享到：
| 服务器上使用gzip压缩
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics