同一瀏覽器的CSS / HTML兼容性問題

Question

美好的一天。

我有一個很奇怪的問題。 這是我第一次遇到這個問題。

我有一個html / css菜單（導航菜單），其中包含ul列表和內部的定位標記。 我正在使用邊框底部突出顯示懸停菜單。

現在發行：我有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開始*************** /

#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 bootstrap作為主要布局，但是我不認為這會引起任何問題，這是前所未有的...

此外，我們都有最新的Chrome版本...

謝謝！

Answer 1

我唯一看到過這種情況的發生是在不同的操作系統之間。 在這種情況下，它只能在Windows和Linux上運行，而不能在Mac上運行。 各種情況之間唯一的共同特征是呈現的菜單字體看起來有所不同。 而且，是的，這也讓我有些頭疼。

您可能還想通過執行CTRL-0來重置頁面縮放，以防萬一有人放大而搞砸了。

起作用的是調整菜單項的填充，直到正確顯示一個不正確的菜單項並同時覆蓋了兩個菜單項。 不幸的是，由於所討論的系統無法訪問開發服務器，因此只能通過反復試驗來做到這一點。