在IE7和IE8中，CSS規則的行爲有所不同

IE7和IE8有一個奇怪的問題，當鼠標懸停時，下拉菜單項會跳轉 - 在頂層菜單項上懸停一些負邊距規則級聯到子菜單項。基本上，下拉菜單覆蓋了來自Twitter引導程序的一些樣式，其中包括app.css應用自定義樣式之前的樣式。在IE7和IE8中，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]（只輟學菜單風格是此刻的問題，我實現了最高級別的項目不是很清晰）

來源

2012-09-21 bsod99

爲了確保：我看到我到目前爲止已經試過器（Chrome，IE9，火狐）瀏覽器的所有跳躍行爲。當IE9在compability模式下運行時，我看到的差異是更高的'div.wrapper'。這是問題，增加的高度？還是我到處看到的跳躍？ –

跳躍的行爲我的意思是在megamenu - 在節標題和子節鏈接，而不是在主菜單欄本身 - 我現在看到，我認爲你的意思。我指的問題只發生在IE7和8上。 – bsod99

只要改變規則以本（基本上.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 {

來源

2012-09-21 10:50:27 tw16

非常感謝，我想我需要更好地掌握使用後代 – bsod99

在IE7和IE8中，CSS規則的行爲有所不同

回答

相關問題