容器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瀏覽器在「帕特我在現在，所以我也不太清楚IE將如何處理它，但嘗試‘白色空間’的風格你的菜單元素。 「white-space：nowrap;」例如將阻止瀏覽器在空間斷開線路。