CSS菜單IE7問題

菜單適用於所有主流瀏覽器，但在IE7中看起來有所不同。請參閱下面的截圖。
在http://jsfiddle.net/FQLdm/6/CSS菜單IE7問題

當你將鼠標懸停在家鄉鏈路檢查演示，你會看到一個子菜單。在IE7中，菜單按鈕和子菜單都被推上了。

這件事發生時我更換此

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:block; 
    float:left; 
}

本（我需要用這種方式inline-block居中列表項）

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 
}

在Chrome中看起來好像沒什麼 In chrome it works fine

在IE7中它看起來不同。請注意主頁按鈕的起始位置。它應該看起來像上面的鉻屏幕截圖。

In IE7 it looks different

來源

2011-12-27 Pinkie

這很可能是某種保證金問題。你有一個重置CSS腳本？我肯定不能100％，但似乎這個子菜單是「推高」主菜單項，就像我之前說過的，這很可能是某種保證金問題。 – Matt 2011-12-27 08:15:26

@matt我已經有一個CSS重置。這不是問題。這隻發生在我使用'inline-block'而不是'block'時。閱讀 – Pinkie 2011-12-27 08:24:13

ohhh我完全錯過了：p，這是因爲IE7並不真正支持內聯塊。它只來自IE8 +。也許使用float：留下一個空白左邊？ – Matt 2011-12-27 08:35:46

在您的li中寫vertical-align:middle。像這樣：

.menu1 ul.menu li{ 
    vertical-align:middle; 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 

}

來源

2011-12-27 09:41:59 sandeep

這是完美的。垂直對齊確實是問題。有用。 Thanksss – Pinkie 2011-12-27 09:49:07

像這樣

把它在當年的html文件頭

<!--[if lte IE 7]> 
    <style> 
    .menu1 ul li ul { 
     position:absolute; 
     top: 5px or 10px; 
    } 
    .menu1 { 
     position: relative; 
    } 
    </style>   
<![endif]-->

來源

2011-12-27 08:18:41

這不起作用。你應該在jsfiddle中嘗試。 – Pinkie 2011-12-27 08:24:36

http://jsfiddle.net/amkrtchyan/qzNKd/ 在我ie7它工作正常 – 2011-12-27 08:32:20

是的，我注意到了。不要在jsfiddle上嘗試。他們似乎在內部的標準瀏覽器上執行此操作。只需在本地複製和粘貼css和html並試試 – Pinkie 2011-12-27 08:38:23

enter image description here