:hover伪类在IE6中的BUG

最近做一个项目菜单如下

于是想到左中右结构制作圆角

1. <ul class="glo_menu">
2.             <li><a href="#"><i></i><span>首页<em>About NEALNET</em></span><b></b></a></li>
3.             <li><a href="#"><i></i><span>关于网络<em>About NEALNET</em></span><b></b></a></li>
4.             <li><a href="#"><i></i><span>新闻动态<em>News Update</em></span><b></b></a></li>
5.             <li><a href="#" class="current"><i></i><span>信息共享查询<em>Information Search</em></span><b></b></a></li>

css代码：

1.         .glo_menu li a{text-align:center;padding:0 5px;}
2.         .glo_menu li a,.glo_menu li span,.glo_menu li em{display:block;}
3.         .glo_menu li a{font-family:Microsoft YaHei;cursor:pointer;text-decoration:none;}
4.         .glo_menu li a span,.glo_menu li a i,.glo_menu li a b{height:35px;padding-top:3px;float:left;display:block;}
5.         .glo_menu li a span{color:#fff;font-size:14px;line-height:18px;width:121px}
6.         .glo_menu li a i,.glo_menu li a b{width:5px;}
7.         .glo_menu li a em{color:#5ca2ce;font-size:9px;line-height:14px;padding-bottom:3px;}
8.         .glo_menu li a:hover{text-decoration:none;}
9.         .glo_menu li a:hover em,.glo_menu li a.current em{color:#005692;}
10.         .glo_menu li a:hover i,.glo_menu li a.current i,.glo_menu li a:hover b,.glo_menu li a.current b,.glo_menu li a:hover span,.glo_menu li a.current span{background-image:url(../img/glo_header.gif);background-repeat: no-repeat;}
11.         .glo_menu li a:hover i,.glo_menu li a.current i{background-position:0 0;}
12.         .glo_menu li a:hover b,.glo_menu li a.current b{background-position:right -50px;}
13.         .glo_menu li a:hover span,.glo_menu li a.current span{background-position:center -100px;}

 

结果发现凡是a:hover下的选择器属性在IE6下都不起作用，苦思不解。后在http://www.17css.com/hover-of-the-bug-in-ie6/这篇博文看到解决方法

IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0

按照此方法尝试

css代码修改如下：

1.         .glo_menu li a{text-align:center;padding:0 5px;}
2.         .glo_menu li a,.glo_menu li span,.glo_menu li em{display:block;}
3.         .glo_menu li a{font-family:Microsoft YaHei;cursor:pointer;text-decoration:none;}
4.         .glo_menu li a span,.glo_menu li a i,.glo_menu li a b{height:35px;padding-top:3px;float:left;display:block;}
5.         .glo_menu li a span{color:#fff;font-size:14px;line-height:18px;width:121px}
6.         .glo_menu li a i,.glo_menu li a b{width:5px;}
7.         .glo_menu li a em{color:#5ca2ce;font-size:9px;line-height:14px;padding-bottom:3px;}
8.         .glo_menu li a:hover{border:0;text-decoration:none;}
9.         .glo_menu li a:hover em,.glo_menu li a.current em{color:#005692;}
10.         .glo_menu li a:hover i,.glo_menu li a.current i,.glo_menu li a:hover b,.glo_menu li a.current b,.glo_menu li a:hover span,.glo_menu li a.current span{background-image:url(../img/glo_header.gif);background-repeat: no-repeat;}
11.         .glo_menu li a:hover i,.glo_menu li a.current i{background-position:0 0;}
12.         .glo_menu li a:hover b,.glo_menu li a.current b{background-position:right -50px;}
13.         .glo_menu li a:hover span,.glo_menu li a.current span{background-position:center -100px;}

 

 

问题迎刃而解！！！撒花

 

 

 

 

 

IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即 CSS [...]