コンテナdivがIEで100％に拡張されていて、展開したくないのですが

Question

コンテナが情報の入力に基づいて展開する必要がありますが、IEでは幅が設定されていないため自動的に100％コンテナの幅を設定すると、内部で許可される情報が制限され、含まれる情報がシフトされます。コンテナは絶対配置され、内部のdivは浮動します。

ツールチップは、ユーザーが#top_panelの上にマウスを置いたときに機能するドロップダウンです。 top_panelとtooltipは、その内部に配置された情報に基づいて展開する必要があるため、幅は設定されていません。

#container { 
    position:absolute; 
    right:33px; 
    top:15px; 
} 

#top_panel { 
    position:relative; 
    float:right; 
    height:31px; 
    background:url(../main_bg.gif) repeat-x top left; 
    border: 1px solid #6a6a6a; 
} 

ul, li { 
    margin:0; 
    padding:0 5px 0 0; 
    list-style:none; 
    display:inline-block; 
} 

#panel_info { 
    visibility:visible; 
    margin-left:18px; 
    list-style:none outside none; 
    margin-top:10px; 
    float:left; 
} 

#panel_info li { 
    border-right: 1px solid #a9a9aa; 
    float:left; 
    margin-right:10px; 
    padding-right:10px; 
} 

#tooltip { 
    position:relative; 
    float:left; 
    clear:both; 
    background-color:#f8f0ce; 
    border-left:1px solid #6a6a6a; 
    border-right:1px solid #6a6a6a; 
    border-bottom:1px solid #6a6a6a; 
} 

#tooltip li { 
    display:block; 
    padding:4px; 
} 

#logout { 
    width:82px; 
    height:31px; 
    position:relative; 
    float:right; 
    margin-left:-9px; 
    margin-top:10px; 
    clear:right; 

} 

#logout ul { 
    margin-left:25px; 
    margin-top:-10px; 
} 


<div id="container"> 
    <div id="top_panel"> 
     <span onmouseover="$('div#container').addClass('hover');" onMouseOut="$('div#container').removeClass('hover');"> 
      <ul id="panel_info"> 
       <li>Name 
        <div id="panel_arrow"> 
        </div><!-- end panel_arrow --> 
       </li> 
       <li> 
        <span class="type">Development 
        </span> 
       </li> 
      </ul> 
     </span><!-- end mouseover event --> 
     <div id="logout"> 
      <div id="logoutIcon"> 
      </div><!-- end logoutIcon --> 
      <ul> 
       <li><a href="#">Logout</a></li> 
      </ul> 
     </div><!-- end logout --> 
    </div><!-- end top_panel --> 
    <div id="tooltip"> 
     <ul> 
      <li>You are now lodded in DEV</li> 
      <li><strong>Company:</strong>This is the company</li> 
      <li><strong>Company ID:</strong> This is the company ID</li> 
     </ul> 
    </div><!-- end tooltip --> 

Answer 1

私はので、私はIEがそれを処理する方法をあまりにもわからないんだけど、今でよ「PUTERでIEを持っていますが、上の 『空白』のスタイルを試みてはいけませんあなたのメニュー要素。 "white-space：nowrap;"例えば、ブラウザがスペースを壊すのを止めるでしょう。