html - Chrome 和 IE8 中的 CSS 悬停问题

Question

我在跨浏览器兼容性方面遇到了问题。

我有一个简单的菜单(出于演示目的删除了所有 JS 功能)。将鼠标悬停在链接上时，链接的背景会变成橙色。

• Firefox (V3.6.17):工作正常。
• Chrome (V11.0.696.60):主要链接通过 :hover 扩展，移动所有其他菜单项。我认为填充或边距会在悬停时扩展
• InternetExplorer (V8):尽管定义了颜色，但链接仍显示为蓝色。

我认为熟悉 CSS 的人很容易识别出这个问题，但我的知识还不够。将不胜感激!

Here is the code on JS Fiddle

这是 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

希望这个有用^^