Javascript jqueryanimate在ie8中工作得并不完美

它在除IE8之外的所有浏览器中都能正常工作

在IE8中，鼠标悬停时，所有盒子都向上移动，鼠标悬停时，所有盒子都向下移动，这种情况只发生在IE8中

IE7和IE9工作正常

js

html（3框）

---

这听起来可能很愚蠢，但试着启用/禁用兼容性模式，同时给出绝对位置而不是相对位置，它在非常难看的布局下工作得很好，，，因此对于ie7，我编写了单独的css，现在问题已经解决，谢谢。。

var timeoutId;

$('.box').mouseenter(function () {
    var $this = $(this);
    if (!timeoutId) {
        timeoutId = window.setTimeout(function () {
            timeoutId = null;
            $this.stop().animate({
                marginTop: '-224px',
                height: '300px'
            })
            $this.find('.rotate-arrow').addClass('rotate');
            $this.find('.header-content-span').css('display', 'none');
        },500); 
    }
});
$('.box').mouseleave(function () {
    var $this = $(this);
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;  
    }
    $this.stop().animate({
        marginTop: '0px',
        height: '77px'
    })
    $this.find('.rotate-arrow').removeClass('rotate');
    $this.find('.header-content-span').css('display', 'block');
});

<div class="box">
    <div class="box-heading bgc-cl1"></div>
    <div class="box-content"></div>
</div>

.box{
    float: left;
    width: 290px;
    height: 77px;
    margin: 0px 8px;
    overflow: hidden;
    cursor: pointer;
    -moz-box-shadow: 5px 5px 8px #888;
    -webkit-box-shadow: 5px 5px 8px #888;
    box-shadow: 5px 5px 8px #888;
    position: relative;
    z-index: 999;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}