jquery - 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在您的列表项上。然后确保将 a 添加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;
}

见演示。