IE 6のフローティングLI

Question

単純な<ul><li></li><ul>システムを使用してナビゲーションを構築し、インラインで表示されるように左側にフローティングします。次のコードは、

IE 6を除くすべてのブラウザでHTML

<div id="sandbox_container"> 
    <div id="sandbox_modalbox"> 
     <div> 
      <ul id="sandbox_modalbox_nav"> 
       <li id="Intro" class="modal_active"><a href="#Intro">Item 1</a></li> 
       <li id="Queries"><a href="#Queries">Item 2</a></li> 
      </ul> 
     </div> 
     <!-- more content here --> 
    </div> 
</div> 

私もJSBinにそれを置く

#sandbox_container { 
    min-height: 385px; 
    width: 940px; 
    padding-bottom: 20px 
} 
#sandbox_modalbox { 
    width: 940px; 
    padding-top: 5px; 
    margin-bottom: -10px; 
} 

ul#sandbox_modalbox_nav { 
    width: 936px; 
    height: 52px; 
    margin: 0px 2px 0px 2px; 
    padding-top: 0px; 
    display: block; 
} 
ul#sandbox_modalbox_nav li { 
    height:52px; 
    float: left; 
    list-style: none; 
    padding: 0px; 
    display: block; 
} 
ul#sandbox_modalbox_nav li a { 
    padding: 12px 30px 0px 30px; 
    height: 52px; 
    display: block; 
} 

CSSを動作します。

私は、<li>のIEが正しく浮動するための幅を定義しなければならないと理解していますが、これらは可変幅のままにしておくことをお勧めします。とにかく浮かせているのですかの幅を制限していませんか？私はem秒でそれを定義することにより除き、変更することができる幅を宣言するか想像することはできません、と考えることができ

Answer 1

私はIE6以外のブラウザでは正しく、問題を理解していた場合は、リスト項目は、お互いの隣に表示されますが、IE6で、彼らは互いの上に表示されます。

この場合、A元素は、それらを含有する要素であるにもかかわらず、浮上されていないので、それがあってもよいです。私は条件付きコメントを使用してのみ、IE6のために、以下を追加します。

ul#sandbox_modalbox_nav li a { float:left; } 

また、Neall is right on track with the whitespace issueを、それが後の項目間に表示するためにいくつかの不要なスペースを引き起こす可能性があり、あなたの現在のディスプレイの問題が解決しない場合でも。

Answer 2

ありません。 10文字未満である可能性があることが分かっているコンテンツがある場合、width: 11em; padding: 0.5em 1em;はコンテンツのための十分なスペースを提供し、それでも幅を定義する可能性があります。

Answer 3

IE 6は<li>要素間の空白文字といくつかのバグがあります。すべてのリスト項目をスペースなしで同じ行に配置してみてください。

編集：さらに検査すると、空白が問題ではないと思います。あなたの例には、余計なスタイルがたくさんあります。問題の内容を伝えるのは難しいです。

Answer 4

私は通常、floatリスト項目をIE6の幅：0に設定することでこれを解決します。これは、1つの理由または他の理由により、それらが正しい動的幅を有するようにさせる。

<!--[if lte IE 6]> 
    <style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style> 
<![endif]--> 

それとも単には、デフォルトの「自動」に戻し、その後、0に幅を設定することにより、CSSセレクタのサポートのIEの不足を活用し、：あなたは、条件付きコメントでこれを行うことができますいずれか

最近のブラウザのために：これは私はとにかく予想の答えですが、私は、幅を宣言しなくても、別の方法を使用してこの問題を回避することができれば

ul#sandbox_modalbox_nav li { width: 0; } 
ul#sandbox_modalbox_nav > li { width: auto; }