我在这里有这个导航菜单，在Windows 浏览器上看起来像这样：
但它在 Mac 浏览器中的显示方式不同
Chrome - 如您所见，主页未显示
Firefox - 它没有完美对齐
我正在使用 wordpress，这是锚的样式
#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;}
菜单是定制的，由 wordpress 动态生成，我从浏览器中复制了这个
<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 插入 span 元素以强制它显示为一种解决方法。
我正在使用 browserstack.com 进行测试，但无法在 jsfiddle T_T 中重新创建问题我希望有人已经体验过这个问题并就如何解决它给我一个意见。
请帮助Y_Y
谢谢