Позиция IE8: абсолютная;

Question

Этот код в Firefox перемещает желтое поле вправо примерно на 20 пикселей, но в IE8 он перемещается на 20 пикселей по странице (обрезается).

    #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'.Также добавьте в свой CSS left:20px для #box1.

демо: http://jsfiddle.net/RqfwE/1/

Answer 2

Хорошей практикой является указание местоположения абсолютного элемента, который анимируется некоторым смещением. Вы запускаете относительную анимацию (- =) и внутренне jQuery вычитает 20 пикселей из текущего значения right, а поскольку right не найдено, jQuery вычитает 20 из 0, что перемещает прямоугольник в крайнее правое положение.

Это означает, что на самом деле Firefox не отображает правильный путь, IE8 и Chrome перемещают прямоугольник в крайнее правое положение.

Чтобы исправить это во всех браузерах, вам нужно указать начальное местоположение:

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

Редактировать : Если вы заранее не знаете, где находится ваш бокс1, моё решение и решение Sotiris могут не сработать. Так что, если указание начального местоположения в CSS не работает для вас, можете сделать этот трюк:

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

и оставьте CSS на прежнем уровне

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