CSS菜單IE7問題

Question

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

將鼠標懸停在主頁鏈接上時，您將看到一個子菜單。 在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中它看起來很好

在IE7中它看起來不同。 請注意主頁按鈕是如何抬起的。 它應該看起來像上面的chrome截圖。

Answer 1

在你的li vertical-align:middle寫下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*/

}

Answer 2

示例在我的PC上的IE7上運行正常。

Answer 3

這樣的事情

把它放在頭上的yore html文件中

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

Answer 4

請教這個答案： 底部有IE6額外填充

此外，不設置display:block有時會導致填充問題，就像我曾經做過的那樣。 嘗試將其添加到CSS以查看是否有任何改進。