Question

这个代码在firefox中将黄色框向右移动大约20px但在IE8中它在页面上移动了20px（它已被剪切）。

    #box1, #box2 {
        width: 100px; 
        height: 100px; 
    }

    #box1 { 
        background: yellow; 
        position: absolute;
    }

    a {
        position: absolute;
        top: 300px;
    }


<div id="wrapper">
    <div id="box1"></div>

    <a href="#">Link</a>
</div>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function(){
            $('a').click(function(){
                $('#box1').animate({
                    right: '-=20px'
                    });
            });
    });
</script>

在这种情况下是否有任何黑客行为，就像firefox一样？

Answer 1

改为使用right，使用left: '+=20px'。同时为left:20px添加css #box1。

演示： http://jsfiddle.net/RqfwE/1/

Answer 2

最好指定由某个偏移量设置动画的绝对元素的位置。你正在运行一个相对动画（ - =），内部jQuery从右边的当前值减去20像素，因为没有找到右边，jQuery从0减去20，这会将框移动到最右边。

这意味着实际上Firefox没有以正确的方式呈现，IE8和Chrome将盒子移到最右边。

要在所有浏览器中修复此问题，您需要指定初始位置：

  #box1 { 
    background: yellow; 
    position: absolute;
    right: 30px;
  }

修改：如果您事先不知道box1的位置，那么我的解决方案和Sotiris解决方案可能对您不起作用。因此，如果在CSS中指定初始位置对您不起作用，可以这样做：

$(function(){ $('a').click(function(){ $('#box1'). css('left', $('#box1').position().left + 'px'). animate({ left: '+=20px' }); });

并将CSS保留为
之前的版本
#box1 { background: yellow; position: absolute; }

IE8位置：绝对;

2 个答案: