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

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!

转载于:https://www.cnblogs.com/Fred_Xu/archive/2011/09/08/ie-a-hover-background-bug.html

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

IE 浏览器中不能使remove删除节点的解决方法
在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加个输入框,点击删除就删除对应的输入框.在一些js框架,如Prot ...
vc10设置断点失效的解决方法
原文地址:http://www.cppblog.com/zhangyq/archive/2011/07/26/151868.html 在运行前用F9设置了断点,但是运行后,那个断点却变成了空心圆和黄色 ...
Xcode 7中Static Cells自动计算高度失效的解决方法
为什么80%的码农都做不了架构师?>>> 在iOS 8及以后的版本,我们可以这样设置tableView,让它自动计算高度 self.tableView.estimatedRow ...
safari打不开cookies_safari cookie设置中文失败的解决方法
释放双眼,带上耳机,听听看~! IOS中safari cookie设置中文失败的解决方法,大家了解吗?当我们在IOS开发这个功能的时候,也许会遇到很多的问题,今天就跟着技术狗小编的步伐来了解吧! 一开 ...
修复迅雷在 IE 等浏览器中右键菜单丢失或失效的问题
修复迅雷(Thunder)在 IE 等浏览器中右键菜单丢失或失效的问题
设置session时间 php,php中实现精确设置session过期时间的方法
这篇文章主要介绍了php中实现精确设置session过期时间的方法,需要的朋友可以参考下大多数据情况下我们对于session过期时间使用的是默认设置的时间,而对于一些有特殊要求的情况下我们可以设置一 ...
html没有注册类,电脑中ie浏览器提示没有注册类别的三种解决方法
ie浏览器功能十分强大,能够给我们带来很棒的网页浏览体验.不过,一些朋友反馈自己在使用ie浏览器过程中,突然遇到"没有注册类别"的出错提示,这是怎么回事呢?其实这是文件的丢失等原因 ...
c++编程设置桌面壁纸以及设置壁纸失效的解决办法
c++编程设置桌面壁纸以及设置壁纸失效的解决办法最近项目中需要一个小工具来设置桌面壁纸,于是想自己尝试用c++写一个. 刚开始,发现COM组件IActiveDesktop 可以设置壁纸.代码如下: ...
【点击链接，自动下载安装APP，小米公司的坑】在浏览器中，我们以为回退就能解决误点击。其实是不管用的。
2018-5-29,更新解释不是西瓜视频的坑. 是小米手机,小米公司的坑,浏览器点击什么链接后,后台或下拉菜单中就自动开始了下载安装 APP. 这类链接大多数是广告链接.小米手机没有提示提醒,也不 ...
在VNC中Xfce4中Tab键失效的解决方法
博客新址: http://blog.xuezhisd.top 邮箱:xuezhisd@126.com 说明在Ubuntu Server 14.04上安装了xfce4桌面环境,但是却发现***在终端中 ...

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

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

最新文章

热门文章