Mac 浏览器不会像 windows 一样显示我的菜单答案

【问题标题】：Mac browsers won't display my menu like windowsMac 浏览器不会像 windows 一样显示我的菜单
【发布时间】：2012-09-20 01:50:42
【问题描述】：

我有这个导航菜单，在 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

谢谢

【问题讨论】：

您能否提供更多代码或在 jsfiddle.net 中创建一个示例？

标签： css macos wordpress navigation styles

【解决方案1】：

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

【讨论】：