シンプルメニュー。 IE7でCSSが動作しない

次のメニューがあります。 IE6やIE7ではなく、すべてのブラウザで動作するようです。問題の原因とは何ですか。どのように修正できますか？ http://jsfiddle.net/2ysCC/シンプルメニュー。 IE7でCSSが動作しない

#menu_wrap { 
    margin-top:20px auto 0 auto; 
    padding:0; 
    width:780px; 
    height:40px; 
    list-style-type:none; 
} 
.button a { 
    cursor:pointer; 
    text-align:center; 
    font:13px/100% Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    position:relative; 
    min-width:50px; 
    height:20px; 
    float:left; 
    padding:10px; 
    padding-right:0; 
    text-decoration:none; 
} 

.Red, .Red .button a { 
    color:#faddde; 
    background: #ed1c24; 
} 
.button:last-child a { 
    float:left; 
    border:none; 
} 

<ul id="menu_wrap" class="Red"> 
    <li class="button"><a href="#">Home</a></li> 
    <li class="button"><a href="#">portfolio</a></li> 
    <li class="button"><a href="#">Latest</a></li> 
</ul>

で

確認作業の例では、これはIE7でどのように見えるかです

出典

2011-10-26 Pinkie

フロートの問題は何ですか？ –

@fix上記のスクリーンショットを追加しました。これはIE7での表示方法です – Pinkie

'表示：インライン;' を追加あなたの '李'に。ここで

#menu_wrap .button { 
    display: inline; 
}

さらに詳細にバグを説明した記事です：http://css-tricks.com/501-prevent-menu-stepdown/

出典

2011-10-26 08:31:48 nheinrich

Not working http://jsfiddle.net/2ysCC/3/ – Pinkie

#menuwrapは#menu_wrap（アンダースコア付き）にする必要があります。 – nheinrich

ありがとうございます。それは問題を解決しました。 – Pinkie

てみposition: relativeを削除して、代わりにそれがfloat: left

出典

2011-10-26 08:29:30

あなたのコードに 'float：left'が表示されませんでした...ちょうど相対的なものを削除しようとしました –

IE7でこれを試しましたか？私は相対的な位置を削除しました。私は既にフロートが残っています。それは私のために働いていない。 – Pinkie

フロートのliタグを作成しますタグ：

.button { 
    float: left; 
}

JSFiddle

出典

2011-10-26 08:31:45

使用このCSS、左要素に<LI>

li.button{ 
    float: left;  
}

出典

2011-10-26 08:37:37 Dev

シンプルメニュー。 IE7でCSSが動作しない

答えて

関連する問題