奇怪的jQuery在Firefox和Opera中動畫頂部/高度/位置錯誤

在Firefox/Opera中使用jQuery生成一個非常奇怪的錯誤，已經搜索和搜索，但是無法在互聯網上的任何位置找到修復。奇怪的jQuery在Firefox和Opera中動畫頂部/高度/位置錯誤

基本上，我有一個盒子列表，我想向上擴展懸停，這是可行的，但它在FF/O中，盒子沒有被徘徊，。所有功能在Safari瀏覽器中都能正常運行，Chrome瀏覽器 - 沒有經過IE瀏覽器測試，因爲這個bug已經阻止了我的發展。

我已經在這裏設置了一個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 
    }

來源

2013-06-03 charliek

問題是什麼？ – zakangelle

哎呀，有點忘了最重要的部分！編輯。 – charliek

使用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。

來源

2013-06-03 19:33:24 zakangelle

你的回答很完美，我只是問錯了問題。該列表是在一個固定的位置頁腳有更新你的小提琴來反映這一點，現在有一個奇怪的跳動動畫/運動正在進行 - http://jsfiddle.net/VMjxR/8/ – charliek

嘗試給你的'footer'元素的高度：http://jsfiddle.net/VMjxR/9/ – zakangelle

你先生是明星。非常感謝。 – charliek

奇怪的jQuery在Firefox和Opera中動畫頂部/高度/位置錯誤

回答

相關問題