Menu Mise en page fonctionne dans tous les navigateurs SAUF iPhone

Question

J'ai un menu très similaire au menu ici sur StackOverflow. Le problème est que mon menu semble correct dans tous les navigateurs que j'ai testés sur EXCEPT pour mon iPhone.

Voici une capture d'écran de l'iPhone

Maintenant, évidemment, le bouton « Ajouter un événement » est censé être la même taille que le reste.

Voici mon Markup

 <div id="menucontainer"> 
      <div class="floatleft"> 
       <ul class="menu"> 
        <li><%: Html.NavigationLink("Now", "Index", "Events")%></li> 
        <li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li> 
        <li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li> 
        <li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li> 
        <li><%: Html.NavigationLink("Users", "Index", "Users")%></li> 
       </ul> 
      </div> 
      <div class="floatright"> 
       <ul class="menu"> 
        <li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li> 
       </ul> 
      </div> 
     </div> 

Et voici mon CSS

#menucontainer{position:relative; width:675px; float:right;} 
ul.menu 
{ 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
} 

ul.menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul.menu li a 
{ 
    padding: 8px 18px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #666; 
    color: #fff; 
    border: 1px solid black; 
    text-shadow:#000 0px 1px 1px; 
} 

ul.menu li a.youarehere 
{ 
    background-color:@brand_color; 
    color: #fff; 
} 

ul.menu li a:hover 
{ 
    background-color:@brand_color; 
    text-decoration: none; 
} 

ul.menu li a:active 
{ 
    background-color:@brand_color; 
    text-decoration: none; 
} 

ul.menu li.selected a 
{ 
    background-color:@brand_color; 
    color: #000; 
} 
.floatright 
{ 
    float: right; 
} 
.floatleft 
{ 
    float: left; 
} 

Malheureusement, je ne peux pas comprendre cela. Merci d'avance pour toute direction.

EDIT:

Ceci est la sortie finale envoyée au navigateur

 <div id="menucontainer"> 
      <div class="floatleft"> 
       <ul class="menu"> 
        <li><a class="youarehere" href="/">Now</a></li> 
        <li><a href="/events/coming">Coming</a></li> 
        <li><a href="/events/hot">Hot</a></li> 
        <li><a href="/tags">Tags</a></li> 
        <li><a href="/users">Users</a></li> 
       </ul> 
      </div> 
      <div class="floatright"> 
       <ul class="menu"> 
        <li><a href="/events/addevent">Add Event</a></li> 
       </ul> 
      </div> 
     </div> 

EDIT:

Reproduction sur jsbin
http://jsbin.com/akadi3/2 (note: de toute évidence vous avez besoin du navigateur iOS pour voir le problème)

Answer 1

Ok, donc après BEAUCOUP de bidouiller autour, il semble que si j'ajoute un height attribut à la menucontainer, alors je suis tout bon.

#menucontainer 
{ 
    position:relative; 
    width:675px; 
    height:40px; /* this fixed the problem */ 
    float:right; 
    font-size:80%; 
}