JQuery UI弹跳效果可以对齐Firefox和IE8中剩余的元素

Question

在Firefox和IE8或更低版本中,JQuery UI的弹跳效果存在问题.IE9,Chrome和Safari正确渲染弹跳效果.是什么原因引起了这个？

要查看问题的示例,最简单的方法是访问我正在处理的网站.在firefox和chrome中访问http://www.AlexAndNikki.net.观看弹出窗口,询问您是否收到了邀请,您将看到我的意思.在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;
}

Firefox无视margin:auto赞成left:0.这解决了这个问题:

#notice {
  margin-left: 300px;
}

对于可变宽度的盒子:

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

#notice {
  display: inline-block;
}

编辑:对于任何使用此答案的人,我想添加几个小调整,使其工作.

第一

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