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

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

HTML按钮列表悬停错误

1 个答案: