CSS活动链接样式正在IE7,FF和Safari中正确应用,但未应用于IE6。
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
有趣的是,背景颜色(背景颜色:#9F1F63;)正在IE6中应用,但不是字体颜色(颜色:#FFFFFF;)
关于为什么会发生这种情况以及如何解决这个问题的任何想法都表示赞赏。
以下导航的完整样式:
.side_nav
{
text-align : left;
margin-left: -10px;
}
.side_nav ul
{
list-style-type: none;
list-style-position:inside;
margin-left:0px;
}
.side_nav li
{
margin-top: 10px;
display: list-item;
list-style-type:none;
}
.side_nav a, .side_nav a:visited
{
text-decoration: none;
color : #9F1F63;
font-weight : bold;
padding: 5px 10px 5px 10px;
}
.side_nav a:hover
{
color:#B26D7F;
}
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
编辑:谢谢,但建议没有帮助。当我更改为:active时,活动效果在任何浏览器中都不起作用。我想这可能是因为我在HTML中应用了这种风格。
<div class="side_nav">
<a class="active" href="Page1.aspx">Page1</a><br />
<a href="Page2.aspx">Page2</a><br />
<a href="Page3.aspx">Page3</a><br />
</div>
答案 0 :(得分:5)
在IE6中,您指定锚链接的顺序很重要。您应该按此顺序指定它们以达到预期的结果:首先是a:link,然后是a:visited,a:hover和a:active。
答案 1 :(得分:4)
你的CSS在.side_nav a.active
中应该有一个冒号的句号(应该是.side_nav a:active
通过这个修复,它在IE6中适用于我。
答案 2 :(得分:3)
我尝试复制你的代码,格式确实有效
你的问题是你看到了访问过的链接 - 你有访问和活动的格式(所以你有紫色背景和紫色文本)。
您应该使用活动类覆盖访问过的链接的颜色:
.side_nav a.active, .side_nav a.active:visited
{
color: #FFFFFF;
background-color: #9F1F63;
}
答案 3 :(得分:2)
尝试向.side_nav a.active
添加更具体的选择器,例如div .side_nav a.active
,其中div
是父元素。
颜色可能会被.side_nav a
规则覆盖。
此外,您可能有拼写错误 - 正在尝试使用:active selector?
答案 4 :(得分:0)
尝试使用!important
。像这样:
.side_nav a.active
{
color: #FFFFFF !important;
background-color: #9F1F63;
}