CSSメニューIE7の問題

Question

メニューはすべての主要なブラウザで動作しますが、IE7では異なって見えます。以下のスクリーンショットを参照してください。
デモの確認http://jsfiddle.net/FQLdm/6/

ホームリンクにマウスを移動すると、サブメニューが表示されます。 IE7では、メニューボタンとサブメニューの両方が押し上げられます。私はChromeの場合、この

.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*/ 
} 

を交換したときに

これは、罰金 に見えるが起こりました

IE7では違って見えます。ホームボタンがどのように持ち上げられているかに注意してください。上のChromeのスクリーンショットのように見えるはずです。

Answer 1

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*/ 

} 

Answer 2

この

のようなものが例私のPC上でIE7上で正常に動作頭の中で昔のhtmlファイルに

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

Answer 3

をそれを置きます。

Answer 4

この回答を参照してください：それはかつて私のためにしたようIE6 extra padding on bottom

また、display:blockを設定しないと、時々、パディングの問題を引き起こす可能性があります。 CSSにそれを追加して、改善が見られるかどうか確認してください。