Расположение меню работает во всех браузерах, КРОМЕ iPhone

Question

У меня есть меню, очень похожее на меню в StackOverflow.Проблема в том, что мое меню выглядит правильно в каждом браузере, который я тестировал на ИСКЛЮЧЕНИИ для моего iPhone.

Вот снимок экрана iPhone

Теперь, очевидно, «Добавить событие»"Кнопка должна быть того же размера, что и остальные.

Вот моя разметка

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

А вот моя 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;
}

К сожалению, я не могу понятьэтот вышел.Заранее спасибо за любое направление.

РЕДАКТИРОВАТЬ:

Это окончательный вывод отправляется в браузер

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

РЕДАКТИРОВАТЬ:

Воспроизведение наjsbin
http://jsbin.com/akadi3/2 (примечание: очевидно, вам нужен браузер iOS, чтобы увидеть проблему)

Answer 1

Хорошо, поэтому после МНОЖЕСТВА, кажется, будто я добавляю атрибут height к menucontainer, тогда я в порядке.

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