Question

我遇到跨浏览器兼容性问题。

我有一个简单的菜单（为了演示而删除了所有JS功能）。链接的背景意味着在悬停时变成橙色。

Firefox（V3.6.17）：正常运行。
Chrome（V11.0.696.60）：主要链接随:hover展开，移动所有其他菜单项。我认为填充
InternetExplorer（V8）：尽管定义了颜色，但链接显示为蓝色。

我认为这个问题很容易被熟悉CSS的人所认识，但我的知识并不是最新的。非常感谢您的解释！

以下是CSS的一部分：

#mainlinks  {
    position:absolute;
    display:block;
    overflow:visible;
    margin:0px;
    padding:0px;
}

#mainlinks li {
    display:block;
    position:relative;
    float: left;
    cursor:pointer;
    overflow:hidden;
    padding:4px;
    margin:45px 3px 2px 3px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size: 14px;
    text-decoration:none;
    list-style: none;
}

#mainlinks li :visited {
    text-decoration:none;
    color:#000;
    padding:4px;
    margin:45px 3px 2px 3px;
}

#mainlinks li :hover {
    text-decoration:none;
    color:#FFF;
    padding:4px;
    margin:45px 3px 2px 3px;
    background-color:#f1592a;
}

Answer 1

尝试li:hover代替li :hover，li:visited代替li :visited

希望这有效^^

Answer 2

你应该尝试将文本特定的样式（即：颜色）应用于'a'标签而不是LI

CSS和IE8中的CSS悬停问题

2 个答案: