CSS 规则在 IE7 和 IE8 中表现不同

Question

我在 IE7 和 IE8 上遇到了一个奇怪的问题，当鼠标悬停在上面时，下拉菜单项会跳来跳去 - 一些负边距规则在悬停在顶级菜单项上时应用，这些菜单项向下级联到子菜单项.基本上，下拉菜单会覆盖 Twitter Bootstrap 中的一些样式，这些样式包含在 app.css 应用自定义样式之前。

这段代码是罪魁祸首，我似乎无法在不丢失我需要的顶级元素样式的情况下覆盖它:

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav li.dropdown.open > .dropdown-toggle {
    height: 12px;
    margin-top: -10px;
    padding-top: 10px;
}

这是一个[演示链接][1](目前只有下拉菜单样式是问题，我意识到顶级元素不是很清晰!)

Answer 1

只需将规则更改为这样(基本上是在.nav 下添加后代选择器):

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
    height: 12px;
    margin-top: -10px;
    padding-top: 10px;
}

即

.navbar .nav li.dropdown.open > .dropdown-toggle {

变成:

.navbar .nav > li.dropdown.open > .dropdown-toggle {