在 IE8 或 IE9 中悬停时无法更改 li a 的背景颜色答案

【问题标题】：Cant change background-color for li a on hover in IE8 or IE9在 IE8 或 IE9 中悬停时无法更改 li a 的背景颜色
【发布时间】：2013-10-02 18:06:41
【问题描述】：

我一直在尝试更改左侧按钮下拉菜单的 li 或锚点的背景悬停颜色（悬停时应该是浅灰色）。在除 IE8 和 IE9 之外的所有其他浏览器中工作。

我尝试了 50 多种不同的组合来覆盖红色，但完全没有运气。

演示页面：http://templatebase.com/lwfdev/newsub/

任何想法将不胜感激。

【问题讨论】：

请贴出你的问题。编写小提琴还可以通过缩小代码范围来帮助您...：悬停在锚上应该不是问题...
jsFiddle: jsfiddle.net/bX6kp
我感觉我的“缩小范围”言论没有达到目标:-) 无论如何，这里的一切似乎都很好（至少是悬停）。再次在 jsfiddle 中缩小问题范围将帮助您帮助自己：如果您无法使用简短版本重现它，那么您可能在元素周围做错了什么。
我知道颜色和问题出自哪里——但我不知道为什么 IE8 或 IE9 不允许我覆盖父元素。我已经研究了一个多小时，并尝试了 50 多种不同的类、样式、元素等组合。没有其他可以缩小范围。

标签： html css twitter-bootstrap drop-down-menu internet-explorer-8

【解决方案1】：

您有重复的样式导致冲突。

IE 正在渲染这些样式：

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    background-color: #BA2C26;
    background-image: linear-gradient(to bottom, #C32E28, #AE2924);
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-decoration: none;
}

虽然现代浏览器呈现这些规则集：

a.new-sub-a:hover, .new-sub-a a:hover {
    background-color: #EBEBEB !important;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    background-color: #EBEBEB;
    color: #333333;
    text-decoration: none;
}

删除所有以前的样式并尝试这个合并版本：

.dropdown-menu > li > a:hover {
    background-color: #EBEBEB;
    color: #333333;
    text-decoration: none;
}

【讨论】：

完美，IE通常只使用它找到的第一个样式吗？
没有。 IE 尊重标准 CSS 优先级方案en.wikipedia.org/wiki/…