IE 7に表示されないUI項目を修正するにはどうすればよいですか？

Question

私はウェブサイトのデザインに取り組んでいます。私はナビゲーションバーを構築するときにIE7に関連する問題と思われるものに問題があります。

あなたはメニュー項目の一部が表示されていないことに気づくことができます。

これは私が得る問題です。

I created a Fiddleです。 （わからない、それはしかし、IE7のに役立ちます： - /、私も同じ問題が起こるskeletton作って：here it is）メニューは、この構造を有する

：私はjQueryのUI CSSを使用しています

<nav> 
<h3>Navigation header 1</h3> 
    <h4>Navigation header level2</h4> 
     <ul> 
      <li><a>my link 1</a></li> 
      <li><a>my link 2</a></li> 
     </ul> 
    <h4>Navigation header level2</h4> 
     <ul> 
      <li><a>my link 1</a></li> 
      <li><a>my link 2</a></li> 
     </ul> 

<h3>Navigation header 2</h3> 
    <h4>Navigation header level2</h4> 
     <ul> 
      ... 
     </ul> 
</nav> 

をこのページの生成されたHTMLは以下の通りですので、それはスキンを変更できるようにするフレームワーク（クラスを使用しては、jQueryのUIとアイコンを形成する）：

<nav class="company-ui-nav ui-widget ui-helper-reset ui-corner-all ui-widget-content"> 
    <h3 class="ui-corner-top ui-widget-header">Examples</h3> 
    <h4 class="first ui-state-default ui-button-text ui-state-highlight"><span class="ui-icon ui-icon-triangle-1-s"></span>Default styles</h4> 
    <ul style="display: block;"> 
     <li class="ui-state-default ui-priority-secondary no-border-top ui-state-highlight"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Contents" class="on">Page contents</a> 
     </li> 
     <li class="ui-state-default ui-priority-secondary no-border-top"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Forms">Forms</a> 
     </li> 
     <li class="ui-state-default ui-priority-secondary no-border-top"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Buttons">Buttons</a> 
     </li> 
     <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Validation">Validation</a> 
     </li> 
    </ul> 
    <h4 class="ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>JS related</h4> 
    <ul style="display: none;"> 
     <li class="ui-state-default ui-priority-secondary no-border-top"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Widgets">Widgets</a> 
     </li> 
     <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
      <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">????</a> 
     </li> 
    </ul> 
    <h3 class="ui-widget-header no-border-top">Navigation h3</h3> 
      <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 0</h4> 
      <ul style="display: none;"> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a> 
       </li> 
      </ul> 
      <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 1</h4> 
      <ul style="display: none;"> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a> 
       </li> 
      </ul> 
      <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 2</h4> 
      <ul style="display: none;"> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.0</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.1</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.2</a> 
       </li> 
      </ul> 
     <h3 class="ui-widget-header no-border-top">Another title</h3> 
      <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 0</h4> 
      <ul style="display: none;"> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a> 
       </li> 
      </ul>     
      <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 1</h4> 
      <ul style="display: none;"> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a> 
       </li> 
       <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom"> 
        <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a> 
       </li> 
      </ul>       
    </nav> 

これを引き起こす可能性があるかについての任意の手掛かりを？私はCSS関連の問題を疑う。

Answer 1

これはhasLayoutの問題のようだ。表示されていない項目のナビゲーションテキストの左側にある矢印の配置にはdisplay:inline-block;を使用しています。 IE7はサポートしていません（またはそれをひどくサポートしていますが、私は覚えていません）inline-blockこれを他のものに変更する必要があります。表示されているメニュー項目の絶対的な位置付けや、それを修正してください。そのいくつかはここにあります - http://www.brunildo.org/test/InlineBlockLayout.html。