HTML按钮列表悬停错误

Question

所以我正在设计这个简单的网站，到目前为止它似乎运行得很好。我一直在使用Safari来测试它，但我无法让它在任何其他浏览器上看起来正确，即Firefox 3.5-ish。问题出在一个用于按钮的行中。在其他浏览器中，按钮被向右推，就好像在上有填充或边距一样，但我指定了0的填充。在Chrome中，将鼠标悬停在原始位置后，按钮会转到正确的位置，但如果通过打开检查器更新页面，则会再次重置到正确的位置。在Firefox和IE9中，它们会向右移动，但不会向后移动。有办法解决这个问题吗？以下是相关代码：HTML

<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;

}

Answer 1

我还测试了IE 9的Chrome、Firefox、IE9和IE8模式，工作正常。请尝试在转换属性中使用ease-in-out而不是ease。我真的不知道出了什么问题。