html - 由 anchor 标记组成的菜单在 Internet Explorer 上无法正常工作

Question

我正在尝试使用 HTML anchor 显示菜单 <a>标签如下图所示。

使用的CSS如下。

a.header-menu:link {
    padding: 6px 6px 6px 6px;
    color: #fff;
    background-color: #888;
    text-decoration: none;
}

a.header-menu:visited {
    color: #fff;
}

a.header-menu:hover {
    background-color: #f90;
    color: #fff;
}                

类(class)header-menu与 <a> 一起使用.

<a href="#" class="header-menu">About</a>

这在 Google Chrome 和 FireFox 上运行良好，但在 Internet Explorer (8) 上，菜单在单击后立即消失。

如何让它在 Internet Explorer 上正常运行？

Answer 1

:link 不会设置已访问链接的样式，因此您的文本变为白色并且背景消失 :)

来自 W3.org :

The :link pseudo-class applies for links that have not yet been visited.

使用基本样式:

a.header-menu {
    padding: 6px 6px 6px 6px;
    color: #fff;
    background-color: #888;
    text-decoration: none;
}

然后，如果需要，在已访问/未访问的链接中添加您想要的任何差异:

a.header-menu:link {
    color: blue;
}

a.header-menu:visited {
    color: purple;
}