html - 在 Safari 浏览器上放大/缩小菜单栏未正确显示

Question

我有一个包含 6 个项目的菜单栏：Safari 浏览器上的问题

当我放大时，您可以在上面和下面的图像中看到差异

当我放大布局时，只会更改 Safari 浏览器。但它在所有其他浏览器上都能正常工作。

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>

Answer 1

删除 .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;
}

这解决了我的问题。