Mac浏览器不会像Windows一样显示我的菜单

Question

此处的导航菜单在 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

由于

Answer 1

你应该尝试从你的风格中删除-webkit-transform: translateZ(0);。我相信它会覆盖z-index: 999。为什么这只会让第一个按钮看不见，我不知道。但它是一个特定于webkit的功能，因此它可以解释为什么Firefox和IE工作正常。