CSS在Chrome中看起來不同，safari VS Internet Explorer

此菜單位於ASP.NET導航上。在Chrome和Safari瀏覽器，它看起來像這樣：CSS在Chrome中看起來不同，safari VS Internet Explorer

chrome and safari

但在Internet Explorer中，它看起來罰款：

internet Explorer

這裏是我的CSS：

div.hideSkiplink { 
    background-color: #000; 
    width: 100%; 
    display: block; 
    height: 42px; 
    font-size: large; 
    font-weight: bold; 
    background: transparent url('../images/redslate_background.gif') repeat-x left top; 
    font-family: 'Times New Roman' , Times, serif; 
    text-transform: uppercase; 
    color: #000000; 
} 

div.menu ul { 
    position: absolute; 
    margin: 0px; 
    padding: 0; 
    list-style-type: none; 
    width: auto; 
} 

div.menu ul li { 
    display: block; 
    float: left; 
    margin: 0 1px 0 0; 
} 

div.menu ul li a { 
    display: block; 
    float: left; 
    color: #000000; 
    text-decoration: none; 
    padding: 14px 22px 0 22px; 
    height: 42px; 
} 

div.menu ul li a:hover, div.menu ul li a.current { 
    color: #fff; 
    background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top; 
}

不知何故，在Chrome和Safari上，菜單似乎低於背景。我該如何解決它？

來源

2011-12-26 CMP

HTML代碼也請 – 2011-12-26 03:39:03

更改字體大小：大;到一些實際上有價值的東西。 – Scott 2011-12-26 03:43:58

不幸的是，這是Internet Explorer中的常見問題。網站開發人員討厭這麼糟糕，因爲這總是會發生！不過，您應該遵循一定的規則如果您希望您的網站從所有網絡瀏覽器打開。請看看這個：Internet and CSS issues

有數以百計的文章，所以你應該谷歌喜歡

IE和CSS兼容性
IE和CSS的東西與此主題相關的問題

來源

2011-12-26 03:42:14

其實瀏覽器都很好就是那個chrome和safari錯位菜單 – CMP 2011-12-26 04:43:50

很明顯，你一直在處理邊緣問題。因此，您可以使用margin-top：10px和top：10px CSS屬性可互換使用。

看來你已經使用過，margin：0 1px 0 0.因此，現在你還應該添加top：10px CSS屬性來調整你的菜單。如需更詳細的幫助，請粘貼您的HTML代碼，以便我可以舉例...

來源

2011-12-26 16:21:57

CSS在Chrome中看起來不同，safari VS Internet Explorer

回答

相關問題