IE浏览器中a:hover设置background失效的解决方法
2011-09-08 17:28
627 查看
hover伪类在IE中有bug以前貌似在网上看到过,但是实际应用中没碰到过,今天正好有个页面需要做一个导航栏,结果a:hover设置background后在IE下是无法显示背景的。
html:
chrome下显示效果:
css:
尽管你怎么样子设置a tag的css都是不管用的,参考了http://www.planabc.net/2007/02/15/ie_hover_bug/
在a tag中增加一个span tag,同时在css中增加
html:
css:
ok,that's done!
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!
相关文章推荐
- IE浏览器中a:hover设置background失效的解决方法
- IE浏览器下jquery的ajax方法失效解决办法
- IE浏览器打印的页眉页脚设置解决方法
- 列表中li标签设置margin在IE6和IE7中第一个行失效的解决方法
- 魅族手机不能通过设置Style和Background展示透明Activity的解决方法
- 设置初始工作文件夹一般方法---在matlab2017失效的解决方法
- 【CSS笔记之六】filter滤镜在IE浏览器失效的原因、Chrome不认document.documentElement.scrollTop的解决方法
- IE浏览器打印的页眉页脚设置解决方法
- Flex 设置WMODE 后滚轮失效的解决方法
- 解决opacity属性在低版本IE浏览器下失效的方法
- 织梦dedecms当channel设置了type和typeid时currentstyle失效时js解决方法
- webview 中textarea设置斜体字体失效的解决方法
- 火狐中,设置align="center"失效的解决方法
- PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
- Android4.0以下Margin设置失效解决方法
- IE浏览器打印的页眉页脚设置解决方法
- vc10设置断点失效的解决方法
- Android4.0 Margin设置失效解决方法
- 关于html中a标记点击连接之后,a:hover鼠标放上去失效的原因及解决方法!
- Win7,64位设置成豆沙绿护眼颜色后,vc6的visual assist 颜色失效,解决方法