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; 
}