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を助けてください
ありがとう