菜單欄顯示不正確的放大/縮小Safari瀏覽器

我有6項的菜單欄：在Safari瀏覽器 enter image description here 菜單欄顯示不正確的放大/縮小Safari瀏覽器

問題，當我放大有差別，你可以在上面和下面看圖片

enter image description here

當我在佈局的變化放大隻有Safari瀏覽器browser.But它是在所有其他瀏覽器正常工作。

CSS：

.menubar { 
    float:left; 
    width:920px; 
    background:url(../images/nav-back.png) top left repeat-x; 
    height:52px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    padding:9px 10px 8px 10px; 
    margin-bottom:32px; 
} 
    .menubar * { 
    padding:0; 
    margin:0; 
    font-size:18px; 
    text-transform: uppercase; 
} 
    .menubar ul { 
    float:left; 
    background:url(../images/nav-bg.gif) top left repeat-x; 
    width:920px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    display: block; 
    } 
    .menubar li { 
    float:left; 
    background:url(../images/depth.gif) top right no-repeat; 
    line-height:52px; 
    text-align:center; 
    } 
    .menubar li.last { 
    background:none; 
    } 
    .menubar li.home a { 
    -webkit-border-radius: 8px 0px 0px 8px; 
    -moz-border-radius: 8px 0px 0px 8px; 
    border-radius: 8px 0px 0px 8px ; 
    width:145px; 
    } 
.menubar li.plan a { 
-webkit-border-radius: 0px 8px 8px 0px; 
-moz-border-radius:0px 8px 8px 0px; 
border-radius: 0px 8px 8px 0px; 
width:150px; 
background:none; 
} 
.menubar li.freecard a { 
width:162px; 
} 
.menubar li.intro a { 
width:160px; 
} 
.menubar li.howitwork a { 
width:152px; 
} 
.menubar li.featurelist a { 
width:151px; 
} 
.menubar li a { 
color:#288fb7; 
display: block; 
text-decoration: none; 
} 
.menubar li a:hover { 
color:#000; 
text-decoration:none; 
} 
.menubar li a.active { 
background:url(../images/nav-hover.gif) top left repeat-x; 
color:#fff; 
} 

<nav class="menubar"> 
      <ul> 
       <li class="home"><a href="index.html">Home</a></li> 
       <li class="freecard"><a href="create-free-card.html">Create FREE Card</a></li> 
       <li class="intro"><a href="relay-card-intro.html">Relay Card Intro</a></li> 
       <li class="howitwork"><a href="howitworks.html">How It Works</a></li> 
       <li class="featurelist"><a href="feature-list.html">Feature List</a></li> 
       <li class="plan last"><a href="plans.html" class="active">Plans</a></li> 
       </ul> 
     </nav>

來源

2012-09-10 user1376575

我們是否也可以看到您的HTML標記？ – Kyle

我已將它添加到css代碼下方，請檢查並回復 – user1376575

刪除.menubar UL的寬度

.menubar ul { 
    float:left; 
    background:url(../images/nav-bg.gif) top left repeat-x; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    display: block; 
}

這解決了我的問題。

來源

2012-09-10 09:16:34 user1376575

菜單欄顯示不正確的放大/縮小Safari瀏覽器

回答

相關問題