firefox와 opera에서 괴상한 jQuery 애니메이션 상위/높이/위치 버그

Question

Firefox/Opera에서 jQuery 애니메이션과 함께 정말 이상한 버그를 얻었지만, interwebs의 어디서나 수정을 찾을 수는 없었습니다.

기본적으로 내가 가지고있는 상자의 목록은 위쪽으로 확장하려면 원하는데, FF/O에서는 붙이지 않은 상자가 끌기 상자가 위로 이동하는 것과 동일한 측정으로 '아래로 밀어 넣기'됩니다. . Chrome의 Safari에서 모든 기능이 예상대로 작동합니다. 아직 테스트 된 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을 추가하여 공백으로 구분하고 ul에 list-style: none을 추가하여 글 머리표를 숨 깁니다.

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을 참조하십시오.