Question

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

基本上我所拥有的是一个盒子列表，我希望在悬停时向上扩展，但是在FF / O中，没有被徘徊的盒子被推倒了＃39;通过与悬停的盒子相同的测量值向上移动。在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。

奇怪的jQuery动画火狐和歌剧中的顶部/高度/位置错误

1 个答案: