跨浏览器的CSS/HTML兼容性问题

我有一个相当奇怪的问题。这是我第一次遇到这个问题。

我有一个html/css菜单（导航菜单）里面包含ul列表和锚标记。我正在使用border-bottom来突出显示悬停上的菜单...

现在问题：我有2台PC在上面工作 - 两个Windows 7，不同的版本。现在在chrome和firefox中，菜单显示正常。另外，我正在使用IE浏览器样式表来修复IE中的对齐问题。看看Image1在上述浏览器中看到我的菜单...

现在在我的雇主的PC（Windows 8）和我的同事PC之一，也是Windows 8，列表项目向下移动 - 在Chrome。也在IE中（没有在FF中测试） - 请参阅Image2。

为什么css会在我的Chrome浏览器上显示正常，但不会显示在他们的浏览器上。浏览器上的其他页面显示正常。

见我的CSS定义菜单：

/用于菜单的父div的CSS的/

#wrapper { 
    margin: 0 auto; 
    margin: 20px auto; 
    text-align: center; 
    width: 960px; 
    background: #f5f5f5; /*url('/images/bgMain.png') repeat center;*/ 
    -moz-box-shadow:0 0 5px #999; 
    -webkit-box-shadow:0 0 5px #999; 
    box-shadow:0 0 5px #999; 
} 

#header { 
    margin: 0 auto; 
    /*background: url('/images/bg2.png') repeat-x center;*/ 
    background: #eee; 
    text-align: center; 
    border-bottom: 6px solid #f3911f; 
}

/**************** ******在这里，菜单CSS STARTS ***************/

#menuNav { 
    height: 100px; 
    text-align: center; 
    margin: 0 auto; 
} 
    #menuNav ul { 
     list-style: none; 

    } 
    #menuNav ul li { 
     display: inline-block; 
     height: 100px; 
     line-height: 178px; 
    } 
     #menuNav ul li a { 
      padding: 0px 15px ; 
      font-family: 'Myriad Pro', 'Open Sans', Arial, sans-serif; 
      font-size: 22px; 
      color: #3c3b3d; 
      text-transform: uppercase; 
      border-bottom: 6px solid #f3911f; 
      text-decoration: none; 
     } 
      #menuNav ul li a.menuSmaller { 
       font-size: 18px; 
       padding-bottom: 2px; 
      } 
      #menuNav ul li a:hover { 
       border-bottom: 6px solid #7f2218;  
      } 
      #menuNav ul li a:focus { 
       border-bottom: 6px solid #7f2218; 
      } 

      /*LOGIN*/ 
      #menuNav ul li#login, #menuNav ul li#logout{     
       float: right; 
       margin: 0px; 
      } 
       #menuNav ul li#login a, #menuNav ul li#logout a { 
        color: #7f2218; 
       } 

/*Show hover effect on selected/active menu*/ 
.activeMenu { 
    border-bottom: 6px solid #7f2218 !important;  
}

HTML：

<div id="wrapper" class="row-fluid"> 

     <div id="header" class="row-fluid"> 
      <div id="logo" class="span2"> 
       <div><a href="Home.aspx" title="Card Vault logo"><img src="images/logo.png" alt="CardVault Logo" /></a></div> 
      </div> 
      <div id="menuNav" class="span10">   
       <ul> 
        <li id="menuSignUp"><a href="SignUp.aspx">Sign Up</a></li> 

        <li id="menuPricing"><a href="Pricing.aspx">Pricing</a></li> 
        <li id="menuCorporate"><a href="Corporate.aspx">Corporate</a></li> 
        <li id="menuAbout"><a href="About.aspx">About</a></li> 
        <li id="menuPartners"><a href="Partners.aspx">Partners</a></li> 

        <li id="login"><a href="login.aspx">Login</a></li>     
       </ul>    
      </div> 
     </div> 
</div>

注：我使用Twitter的引导为主要布局，但我donlt认为这可能会导致任何问题，但以前从未...

而且，我们都拥有最新的Chrome版本...

Image1 - Display fine on my Chrome browsers