jQuery UI反弹效果可将Firefox和IE8中的元素向左对齐

Question

在火狐和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

Answer 1

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

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:对于任何使用这个答案的人，我想添加几个小的调整，使它工作。

第一

    #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...