IE浏览器中a:hover设置background失效的解决方法
2011-09-08 17:28 Fred-Xu 阅读(5391) 评论(0) 编辑 收藏 举报hover伪类在IE中有bug以前貌似在网上看到过,但是实际应用中没碰到过,今天正好有个页面需要做一个导航栏,结果a:hover设置background后在IE下是无法显示背景的。
html:
<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:
#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:
<LI><A href="http://preprod-world-2007/knowledge/udc2011/en/Pages/home.aspx#"><span>Make of your event</span></A>
css:
#nav li ul li a:hover span{background:#fff; display:block; width:16em;}
ok,that's done!