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

在Firefox和IE8或更低版本中，jQueryUI的反弹效果都存在问题。IE9、Chrome和Safari正确渲染反弹效果。你知道这是什么原因吗

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

以下是运行bounce的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;
}

Firefox忽略了

margin:auto

，而支持

left:0

。 这解决了问题：

#notice {
  margin-left: 300px;
}

对于可变宽度框：

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

#notice {
  display: inline-block;
}

编辑：对于使用此答案的任何人，我想添加一些小的调整，使其工作正常

首先

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

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

---

是的，如果我有一个可变宽度的容器，这会很糟糕。@Chevex好吧，然后你只需要设置display:inline block并将text align:center应用到容器中。哎哟，这实际上使问题开始在所有浏览器中发生：/p，在一个简化的示例中对我起作用，但在你的网站上不起作用。好吧，我猜$（“#notice”）.css（'margin-left'：parentWidth-noticeWidth/2）是程序员在这里最好的朋友。这很管用，但需要额外的调整。所有效果操作都必须在父对象（#通知容器）上执行，而不是在居中的子对象（#通知）上执行。正在上载更改，以便您可以看到它的运行：）

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