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按钮清单悬停错误

回答

相关问题