HTML按鈕清單懸停錯誤

所以我正在設計這個簡單的網站，它似乎運作良好，直到現在。我一直在使用Safari來測試它，但我無法在任何其他瀏覽器上看到它，即Firefox 3.5-ish。問題在於用於按鈕行。在其他瀏覽器中，按鈕被推到右側，就好像有填充或邊距，但是我指定了填充0.在Chrome中，按鈕在懸停在原始位置之後移動到正確位置，但重置爲正確位置再次通過打開檢查員來更新頁面。在Firefox和IE9中，他們向右移動，但不移動。有沒有辦法來解決這個問題？這裏是relavent代碼： HTMLHTML按鈕清單懸停錯誤

<div id= "menu"> 
<ul> 
<li> 
    <a href="javascript:openPage1()"> 
     <span class="menu-button">Home</span> 
     </a> 
    </li> 
    <li> 
     <a href="javascript:openPage2()"> 
     <span class="menu-button">Dave is Cool</span> 
     </a> 
    </li> 
    <li> 
     <a href="javascript:openPage3()"> 
     <span class="menu-button">Submit</span> 
     </a> 
    </li></ul></div>

CSS

#menu ul { 
margin:0; 
padding:0;

}

#menu { 
height: 164px; 
text-align: center; 
position:absolute; 
bottom:-120px; 
width:650px;

}

#menu li { 
height:30px; 
width:120px; 
    display: inline-block; 
    text-align: center; 
    line-height:30px; 
    margin: 30px 5px; 
    position: relative; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease;

}

#menu li:hover { 
    margin: 30px 10px;

}

#menu li:active { 
    margin: 30px 10px;

}

#menu a:link { 
text-decoration:none; 
color:black;

}

#menu a { 
text-decoration:none; 
text-transform:uppercase; 
color:black;

}

#menu a:active { 
text-decoration:none; 
color:black;

}

#menu a:hover { 
text-decoration:none; 
color:black;

}

來源

2012-01-26 Taslem

你能發佈一個鏈接到你的網站？我有這個工作，但我沒有看到任何錯誤...我測試的所有瀏覽器看起來都很好（即當然，8並不呈現緩動，但它在瀏覽器中看起來相同（FF9 ，Chrome 16，IE8）。另外，如果你可以包含一些截圖，突出顯示的問題 – 2012-01-26 23:50:18

不幸的是，我沒有得到一個機會把網站在線。但是這是我遇到的問題：http：// imgur。 COM/3t0rh – Taslem 2012-01-27 00:03:26

我在Chrome，火狐，IE9 IE9和IE8的模式也測試和正常工作。嘗試在轉換屬性中使用ease-in-out而不是ease。我真的不知道發生了什麼問題。

來源

2012-01-27 04:50:49 thiagobraga

HTML按鈕清單懸停錯誤

回答

相關問題