IE7インラインブロックのトリックは、私がここにレイアウトを持っている

Question

を動作していないようです：

https://dustinhendricks.com/breastfest/index.html

私はインラインブロックメニュー要素を信じるだけでなくIE7（またはIE8互換表示）、を除い作品動作していない、それはie7で期待されています。私はzoom：1と* display：ie7のインラインを設定するというトリックを試みましたが、まだ動作していないようです。何か案は？

HTML

<ul> 
    <li><a href="#" class="selected" title="The Breastfest Homepage">Home</a></li> 
    <li><a href="#" title="Learn more about The Breastfests">About</a></li> 
</ul> 

CSS

#main #header ul { 
    float: right; 
    clear: right; 
    margin-top: 13px; 
    margin-right: 12px; 
    list-style: none; 
    max-height: 45px; 
} 

#main #header ul li { 
    display: inline; 
} 

#main #header ul li a { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    height: 45px; 
    color: #f0d8be; 
    font-size: 20px; 
    line-height: 45px; 
    margin-left: 13px; 
    letter-spacing: 1px; 
    zoom: 1; 
    *display: inline; 
} 

#main #header ul li a:hover { 
    height: 47px; 
    top: -2px; 
} 

#main #header ul li a.selected { 
    background: transparent url(../images/menu-selected.gif) bottom center no-repeat; 
} 

注：私はまた、完全なホバー効果を維持したいと思います。

Answer 1

問題は、ulが浮動していたことでした。修正するためにこれを絶対位置に切り替える必要がありました。

Answer 2

IE7の場合、LIにはfloat:leftを使用し、Aタグにはdisplay:blockを使用してください。ブロックの最後にフロートをクリアしてください。 IE6で働いインラインブロックを作る

Answer 3

#Element { 
    zoom:1; 
    *display: inline; 
    _height: 30px; 
} 

+ 7

スタイルはクラス/ IDの最後のスタイルでなければなりません。

あなたが必要とする高さに設定します。