0

Windows ブラウザーでは次のようなナビゲーション メニューがあります。

ここに画像の説明を入力

ただし、Mac ブラウザでは表示が異なります

Chrome - ご覧のとおり、ホームが表示されていません

ここに画像の説明を入力

Firefox - 完全に整列していません

ここに画像の説明を入力

私はワードプレスを使用しています。これがアンカーのスタイリングです

#header #access a{ -webkit-transform: translateZ(0); width:100%; z-index: 999; padding: 0 8px 0 14px; min-height:14px; display:block; position:relative; display:block; vertical-align:middle; }
#header .menu-header {min-height: 100%;}
#header .menu-header > ul{margin-top: 19px; font-size: 14px; max-height: 16px;}
#header .menu-header > ul > li{ float:left; text-align:left; display: block; border-left: 1px solid #ab917a;  max-height: 16px; z-index:1;}
#header .menu-header > ul > li:first-child{ border-left: none; }
#header .menu-header > ul > li > ul{padding-top: 20px;}

メニューはカスタムメイドでワードプレスによって動的に生成されます。これをブラウザからコピーしました

    <div id="access" role="navigation">
        <div class="menu-header">
           <ul id="menu-main" class="menu"><li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-82 current_page_item menu-item-228"><a href="/">Home</a></li>
         <li id="menu-item-761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-761"><a href="/about-chevy-chase-facial-plastic-surgery/">About Us</a>
    </li>
         <li id="menu-item-313" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-313"><a href="/washington-dc-plastic-surgery-photos/">Photo Gallery</a></li>
       <li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="/plastic-surgery-specials-chevy-chase/">Specials</a>

    </li>
       <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="/contact-facial-plastic-surgeon-chevy-chase/">Contact Us</a></li>
         </ul>
      </div> 
   </div> <!-- end access -->

現在、jquery を使用してスパン要素を挿入し、回避策として強制的に表示しています。

私はテストに browserstack.com を使用していますが、jsfiddle T_T で問題を再現することはできません。誰かが既にこれを経験していて、修正方法を教えてくれることを願っています。

Y_Yを助けてください

ありがとう

4

1 に答える 1

0

-webkit-transform: translateZ(0);スタイルから削除するようにしてください。オーバーライドすると思いますz-index: 999。なぜこれが最初のボタンを非表示にするだけなのか、私にはわかりません。しかし、これは Webkit 固有の機能であるため、Firefox と IE が正常に動作する理由を説明できます。

于 2012-10-17T12:10:47.263 に答える