Problème avec la zone de défilement horizontal dans IE?

Question

J'ai le balisage suivant:

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

Avec le CSS suivant:

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

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

Je javascript avec les parchemins #routes div.

Les éléments de la liste ul.routesList s'affichent horizontalement et débordent, mais dans IE, ils s'emboîtent et débordent verticalement dans IE?

J'ai essayé d'utiliser des mots mais pas de chance!

Existe-t-il des quirks IE ici ou est-ce que quelque chose ne va pas avec mon CSS/HTML?

Merci

Answer 1

Vous avez mis un identifiant sur votre liste, mais référencés par classe dans votre CSS - J'ai mis un peu de CSS travail ci-dessous qui fait ce travail que vous décrivez dans IE et 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; 
}