導航菜單css樣式在ie7中的子菜單空白

我有一個由WordPress生成的導航菜單，這意味着我幾乎不能控制它的輸出。導航菜單css樣式在ie7中的子菜單空白

我已經使用CSS來按照我想要的方式懸停子菜單，但它在IE7中看起來不合適。它在其他瀏覽器中沒有任何問題。

即使在瀏覽器工作，因爲我在我的網站上使用@fontface，但沒有包含在jsFiddle中，主菜單可能看起來不對。主要問題是子菜單項之間的差距。

我已經嘗試垂直對齊子菜單li和a，但它要麼變得更糟，要麼沒有解決問題。

我複製了這裏的問題：如果我添加

#menu-header .sub-menu a { height: 100%; }

它修復的垂直間距問題，但項目不再相同的寬度[鏈接刪除]

。

2011-08-12 gavsiu

你可以嘗試以下方法：

#menu-header .sub-menu a { zoom: 1; }

這將消除差距，但項目將是相同的寬度內的內容。

前段時間我有同樣的問題。我所做的是，在li內部創建一個容器div。以便更長的文本可以換行，並設置一個靜態寬度。你甚至可以使用jQuery來動態調整每個下拉菜單的寬度，但這是一個完全不同的故事。

一些參考：

2011-08-12 07:12:48

檢查了所有的方法。「zoom：1」的寬度各不相同。設置px寬度和「zoom：1」意味着菜單沒有靈活性（較長的單詞只會溢出）。浮動列表項目也會導致不同的寬度。底部邊框不起作用。 – gavsiu

我想我必須用固定寬度來解決。我看了Wordpress的Twenty Eleven主題，他們也做了同樣的事情。 – gavsiu

您可以爲IE7及更低版本設置固定寬度的CSS。所以好的瀏覽器會有不同的寬度。請參閱http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/並使用IE7及更低版本。 :) –

回答