IE7 CSS Horizo​​ntal Menu - Liはお互いの中に入れ子になっているようです。

Question

私はこのIEの問題が何度も出てくることを知っていますが、私はすべての午前中に答えを探しています。

私の水平ナビゲーションメニューは、IE7を除くすべてのブラウザで完全にレンダリングされているようです。私は問題が幅のないリストを使っている可能性があると思っています（しかし、幅を必要としません。テキストの長さによっては自動的にしたいと思います）。あるいは、それぞれの中に座っているようです14pxパッディングトップを適用し続けます。私は私の李のすべてが終了タグと浮動小数点を持っているので、なぜ彼らはお互いに座っているのかわからない：左;

あなたを見てみると

#navig ul li {float:left;} 

：ここ

は（あなたがフロートアプローチを使用しているので）すべてliアイテムが浮くように、次のCSSルールを追加する

<div id="navig"> 
    <ul> 
     <li class="navig-left"></li> 
     <li class="home"><b>Home</b></li> 
     <li><a class="tabs" href="about.html">About Us</a></li> 
     <li><a class="tabs" href="services.html">Services</a></li> 
     <li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li> 
     <li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li> 
     <li><a class="tabs" href="contact.html">Contact Us</a></li> 
     <li><a class="tabs" href="careers.html">Careers</a></li> 
     <li><a class="tabs" href="affiliates.html">Affiliates</a></li> 
     <li class="navig-right"></li> 
    </ul> 
</div> 

<div class="clr"></div> 



#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); } 
#navig ul { list-style-type:none; height:46px; width:960px; } 
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; } 
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; } 
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; } 
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; } 
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); } 
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); } 

Answer 1

がしよう..私のコードです実際にはfloat:leftをメニュー内のすべてのリスト項目に適用しないで、li.activeとli.homeのみを適用します。他のブラウザはそれに対処するようだが、IEはそれを好まない。

jsFiddle（私はそれはあなたが我々がへのアクセスがありません背景画像の上に白のテキストを使用しているので、作業を取得するためにいくつかの色を変更する必要がありました注意してください - 。テストの目的のために、白に白の原因を）私はこれをテストし

IE 7/8/9、FF、Chromeのフィドル今でも一貫して動作します。

Answer 2

強制的にIE7をページの先頭に追加するようにIE8をレンダリングすることができます。

<meta http-equiv="X-UA-Compatible" content="EDGE" />