IE8位置：绝对;

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'。还可以在#box1中添加您的css left:20px。

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

Answer 2

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

这意味着，实际上Firefox并没有呈现正确的方式，IE8和Chrome将框移动到最右侧。

在所有浏览器解决这个问题，你需要指定起始位置：

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

编辑： 如果您不知道您事先的BOX1的位置，然后我的解决方案和解决方案索蒂里斯可能不适合你。 所以，如果在CSS中指定初始位置不适合你的工作，能做到这一点窍门：

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

，离开CSS到它以前

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