मेनू लेआउट सभी ब्राउज़रों में काम करता है आईफोन

Question

मेरे पास स्टैक ओवरव्लो पर मेनू के समान मेनू है। समस्या यह है कि मेरा मेनू मेरे ब्राउज़र के लिए EXCEPT पर परीक्षण किए गए प्रत्येक ब्राउज़र में सही दिखता है।

यहाँ 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> 

यहाँ है और मेरे सीएसएस

#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 (ध्यान दें: जाहिर है आप आईओएस ब्राउज़र की आवश्यकता को देखने के लिए समस्या)

Answer 1

ठीक है, तो बहुत सारे झुकाव के बाद, ऐसा लगता है कि अगर मैं एक जोड़ता हूं heightmenucontainer पर विशेषता, तो मैं सब ठीक हूं।

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