我有一個菜單非常類似於StackOverflow中的菜單。問題是我的菜單在我測試過的每個瀏覽器中看起來都是正確的，除了我的iPhone。菜單佈局適用於所有瀏覽器除了iPhone

這裏是iPhone iphone menu

現在很明顯的「添加事件」按鈕應該是大小爲其餘相同的屏幕截圖。

這裏是我的標記

 <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瀏覽器中看到問題）

來源

2010-11-12 Chase Florell

這很難與ASP.NET MVC相關。請將您的最終標記發佈爲由瀏覽器呈現。 – 2010-11-12 18:57:25

我不知道CSS類floatleft和floatright是否與佈局有關？你可以發佈這些呢？ – 2010-11-12 19:01:09

@Mike，完成... @Darin，完成... – 2010-11-12 19:03:36

好的，所以經過大量的擺弄，看起來好像我是否添加了一個height屬性爲menucontainer，那麼我都很好。

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

來源

2010-11-12 22:29:45

菜單佈局適用於所有瀏覽器除了iPhone

編輯：

編輯：

回答

相關問題