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

来源：互联网发布：不出户知天下编辑：程序博客网时间：2024/05/21 19:28

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

0 0