IE中水平滾動區域的問題？

Question

我有以下的標記：

<div id="routes"> 

<ul id="routesList"> 
    <li class="routes">Route 1</li> 
    <li class="routes">Route 2</li> 
    <li class="routes">Route 3</li> 
</ul> 

</div> 

用下面的CSS：

#routes { 
    height:20px; 
    width:770px; 
    overflow:hidden; 
} 

ul.routesList{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:left; 
    width:auto; 
} 

我有一些JavaScript和滾動#routes股利。

ul.routesList列表項呈現水平和溢出，但在IE瀏覽器它們在IE中垂直包裝和溢出？

我已經嘗試使用文字包裝，但沒有運氣！

有沒有IE瀏覽器的怪癖在這裏或是有什麼問題，我的CSS/HTML？

感謝

Answer 1

你已經把一個ID列表上，但它引用的類在CSS - 我已經把一些工作的CSS下面，讓你在IE和Firefox形容這項工作。

#routes { 
    height:20px; 
    width:770px; 
    overflow:hidden; 
     background-color: Aqua; 
} 

#routesList{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    width:auto; 
} 

#routesList li { 
    float: left; 
    width: auto; 
    padding: 0 10px; 
}