Firefox和Opera中奇怪的jQuery动画顶部/高度/位置错误

Question

在 Firefox/Opera 中使用 jQuery animate 遇到一个非常奇怪的错误，已经搜索和搜索但无法在互联网上的任何地方找到修复。

基本上，我所拥有的是一个框列表，我想在悬停时向上扩展，这可行，但在 FF/O 中，未悬停的框被“下推”，与悬停的框向上移动相同。在 Safari 和 Chrome 中，一切都按预期运行 - 尚未测试 IE，因为这个错误已经阻止了我。

我在这里设置了一个 jsFiddle - http://jsfiddle.net/VMjxR/5/ - 代码粘贴在下面。

我们将不胜感激。

干杯

HTML：

<ul>
<li>1</li> 
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

jQuery:

$(function() {
        $("li").hover(function() {
        $(this).stop().animate({"height": "170px", "top": "-140px"});
    }, function() {
        $(this).stop().animate({"height": "30px", "top": "0px"});
    });
    });

CSS：

ul {
    height: 30px;
    margin-top:200px
  }
ul li {
    width: 30px;
    position: relative;
    height: 30px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    background:red
  }

Answer 1

在列表项上使用 float: left 而不是 display: inline-block。然后确保将margin-right 添加到您的列表项以将它们分开，并将list-style: none 添加到您的ul 以隐藏项目符号。

ul {
  height: 30px;
  margin-top:200px;
  list-style: none;
}
ul li {
  width: 30px;
  position: relative;
  height: 30px;
  overflow: hidden;
  text-align: center;
  background:red;
  float: left;
  margin-right: 4px;
}

见DEMO。