jQuery UI 弹跳效果对齐 Firefox 和 IE8 中左侧的元素

在 Firefox 和 IE8 或更低版本中，JQuery UI 的反弹效果存在问题。 IE9、Chrome、Safari都能正常渲染反弹效果。任何想法是什么导致了这个？

该问题在 Firefox 和 Chrome 中都有体现。弹出窗口询问您是否收到邀请。在 Firefox/IE8 中，盒子弹跳时会跳到左侧。

这是运行反弹的 jQuery：

            if ($.readCookie('noticehidden') == null)
            {
                $('#notice').show('drop', { direction: 'left' }, 2000)
                .data('bounceinterval', setInterval(function ()
                {
                    $('#notice').effect("bounce", { times: 3, distance: 10 }, 300);
                }, 5000));
                $('#dismissnotice').click(function (e)
                {
                    clearInterval($('#notice').data('bounceinterval'));
                    $('#notice').hide('drop', { direction: 'right' }, 2000);
                    $.setCookie('noticehidden', 'true', { duration: 365 });
                    e.preventDefault();
                    return false;
                });
            }

我正在使用 jQuery 1.4.4 和 jQuery UI 1.8.6

弹跳效果将此样式应用于元素：

element.style {
    bottom: auto;
    left: 0;
    position: relative;
    right: auto;
    top: 0;
}

火狐浏览器无视margin:auto有利于left:0。 这解决了问题：

#notice {
  margin-left: 300px;
}

对于可变宽度框：

#notice-container {
  text-align: center;
}

#notice {
  display: inline-block;
}

EDIT:对于使用这个答案的任何人，我想添加一些使其起作用的小调整。

First

    #notice-container
    {
      text-align: center;
      display: none; /*Add this to make the parent invisible until the show effect is used.*/
    }

接下来，应该修改问题中的上述 JQuery 以使用父容器，而不是居中的子容器。

$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...