IE浏览器中a:hover设置background失效的解决方法

hover伪类在IE中有bug以前貌似在网上看到过，但是实际应用中没碰到过，今天正好有个页面需要做一个导航栏，结果a:hover设置background后在IE下是无法显示背景的。

html：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< ul  id="nav">      < LI >          < A  href="http://preprod-world-2007/knowledge/udc2011/en/Pages/home.aspx">              Home          </ A >      </ LI >      < LI >          < A  href="http://preprod-world-2007/knowledge/udc2011/en/Pages/home.aspx#">              Submissions          </ A >          < UL >                      < LI >                          < A  href="http://preprod-world-2007/knowledge/udc2011/en/Pages/submit.aspx">                              < span >                                  Selection process                              </ span >                          </ A >                      </ LI >          </ UL >          </ LI > </ ul >

chrome下显示效果：

css：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

#nav, #nav ul{ margin : 0 ; padding : 0 ; list-style-type : none ; list-style-position : outside ; position : relative ; line-height : 1.5em ; background : #b5bd00 ; }   #nav a{ display : block ; padding : 0px  5px ; COLOR:  #484848 ; FONT-SIZE:  10px ; FONT-WEIGHT:  bold ; text-decoration : none ; }   #nav li{ float : left ; position : relative ; }   #nav ul { position : absolute ; display : none ; width : auto ; top : 1.5em ; z-index : 1000 ; }   #nav li ul a{ width : 12em ; height : auto ; margin : 2px ; float : left ; display : block ; }   #nav li ul li a:hover{      background : #fff ;      margin : 2px ;      display : block ; }   /*#nav li ul li a:hover span{background:#fff; display:block; width:12em;} */ #nav ul ul{ top : auto ; }   #nav li ul ul { left : 12em ; margin : 0px  0  0  10px ; }   #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{       display : none ; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display : block ; }

　　

尽管你怎么样子设置a tag的css都是不管用的，参考了http://www.planabc.net/2007/02/15/ie_hover_bug/

在a tag中增加一个span tag，同时在css中增加

html：

1 2	< LI >< A  href="http://preprod-world-2007/knowledge/udc2011/en/Pages/home.aspx#">< span >Make                                                      of your event</ span ></ A >

css：

1	#nav li ul li a:hover span{ background : #fff ;  display : block ;  width : 16em ;}

　　

ok，that's done!

转自：http://www.cnblogs.com/Fred_Xu/archive/2011/09/08/ie-a-hover-background-bug.html