跨瀏覽器的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