我在跨浏览器兼容性方面遇到了问题。
我有一个简单的菜单(出于演示目的删除了所有 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;
}
最佳答案
尝试用li:hover
代替li :hover
,用li:visited
代替li :visited
希望这个有用^^
关于html - Chrome 和 IE8 中的 CSS 悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5858825/