CSS菜單看起來像在歌劇廢話

好吧，所以我一直在努力編寫我的網站Alternative Apps，幾天，我在Opera中測試它，菜單比我想要的更高。在FF和Chrome中看起來很好，但我似乎無法弄清楚如何修復Opera。（還未對IE進行測試）CSS菜單看起來像在歌劇廢話

有人可以爲我解決這個問題，或者更好地向我解釋爲什麼它是這樣的，以及如何解決它？

div#topnav { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:25px; 
    background-image:-webkit-linear-gradient(#00fcff, #000); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00fcff), to(#000)); 
    background-image:-moz-linear-gradient(#00fcff, #000); 
    background-image:-o-linear-gradient(#00fcff, #000); 
    font-family:Arial; 
    font-size:12px; 
    color:silver; 
    text-align:right; 
    z-index:1000; 
    box-shadow:0px 0px 16px #000; 
    text-shadow:0px 0px 2px #000;} 

div#topnav button { 
    cursor:pointer; 
    font-family:Arial; 
    font-size:12px; 
    color:silver; 
    text-decoration:none; 
    border:0px; 
    height:25px; 
    background-color:transparent; 
    text-shadow:0px 0px 2px #000; 
    transition:all 250ms ease-in-out; 
    -webkit-transition:all 250ms ease-in-out; 
    -moz-transition:all 250ms ease-in-out; 
    -o-transition:all 250ms ease-in-out; 
    -ms-transition:all 250ms ease-in-out;} 

div#topnav button:hover { 
    color:#fff; 
    background-color:rgba(0, 0, 0, 0.2);} 

div#topnav button:active { 
    background-color:rgba(0, 0, 0, 0.5);} 

ul#menu { 
    list-style:none;} 

ul#menu li { 
    display:block; 
    float:right; 
    margin-top:-14px; 
    padding-right:10px; 
    cursor:pointer;}

來源

2011-09-06 Michael Schwartz

我在IE8中看到了同樣的問題。另外，頁面加載時出現錯誤：*期望的標識符，字符串或數字，第34行，第4個字符* –

這將是topnav div的投影。（box-shadow：0px 0px 16px＃000;） –

你可能提供截圖嗎？ –

問題是您沒有文檔類型，所以您的網頁使用的是Quirks Mode。

添加爲的第一行：

<!DOCTYPE html>

這修復在Opera菜單，大規模提高Internet Explorer中的整個頁面。

總是向新網站添加文檔類型，沒有例外。

來源

2011-09-06 15:28:49 thirtydot

CSS菜單看起來像在歌劇廢話

回答

相關問題