IE8でのCSSメニューの問題 - デバッグ

これは簡単なCSSメニューです（this page.）。Chromeではうまく動作します。これは私が使用している関連するCSSです。IE8でのCSSメニューの問題 - デバッグ

ul#list-nav { 
    clear:both; 
    list-style:none; 
    margin:0 0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav { 
    list-style:none; 
    margin:0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav li { 
    display:inline 
} 
ul#list-nav li a { 
    text-decoration:none; 
    padding:5px 0; 
    width:16.62%; 
    background:#754C78; 
    color:#eee; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; 
}

これは主にwidthに問題だが、また、彼らは、わずかに浸漬しているので、奇妙な何かが右の最後の2つのセルで起こって？

私は何か提案をいただきありがとうございます。

はタラ

出典

2011-08-02 Tara

のための38pxを追加することは、第1、全体を簡素化しようと、

をいただき、ありがとうございます。 Fxで浮動するのに十分な幅ではありません。オペラにも2つの最後のボタンの衝突が表示されます。たとえば、アンカーに 'float：left;'があるのはなぜですか？親 'LI'にはすでに' display：inline; 'があります。これは同様の効果をもたらします... – feeela

ウェブサイトは私にとってうまく表示されますあなたのコードを見ても、セミコロンで 'display：inline'をクローズしていないことがわかります。 – tw16

@TaraすべてのブラウザでOKかどうか。問題はコードの基本的なことにあります。それぞれの 'menu li'の幅を上部の画像の白い線と一致するものに設定すると、メニューの全体の幅が大きすぎます。まだ多くはありません。私はおそらく、それらがメニューに一致するように、サイドバーと上部の画像の幅を設定し、800px幅の領域を塗りつぶすように、それらの高さを設定します。私はあなたがクロムを使用することを思い出します。 chromeではどこでも右クリックすればリストの 'Inspect element'が表示されるはずです。要素を調べるために開発者ツールを使用してくださいそれはたくさんの助けになります – Joonas

が幅を削除し、より多くの矛盾があるようpadding-leftとpadding-right

ul#list-nav li a { 
background:#754C78 none repeat scroll 0 0; 
border-left:1px solid #FFFFFF; 
color:#EEEEEE; 
float:left; 
padding:6px 38px; 
text-align:center; 
text-decoration:none; 
}

出典

2011-08-02 09:58:30

IE8でのCSSメニューの問題 - デバッグ

答えて

関連する問題