1

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

1 に答える 1

0

.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-10T09:16:34.910 に答える