Position IE8: absolue;

Question

Ce code dans firefox déplacer la boîte jaune vers la droite à propos de 20px mais dans IE8 il déplacer 20px sur la page (il est découpé).

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

Y a-t-il des hacks qui font, par exemple, se comporter comme firefox dans ce cas?

Answer 1

utilisez plutôt right, utilisez left: '+=20px'. Ajoutez également dans votre css left:20px pour #box1.

Démo:http://jsfiddle.net/RqfwE/1/

Answer 2

Il est une bonne pratique pour spécifier l'emplacement d'un élément absolu qui est animé par un certain décalage. Vous exécutez une animation relative (- =) et en interne jQuery soustrait 20 pixels de la valeur courante de right et puisque right n'est pas trouvé, jQuery soustrait 20 de 0, ce qui déplace la boîte vers l'extrême droite.

Cela signifie que Firefox ne fonctionne pas correctement, IE8 et Chrome déplacent la boîte à l'extrême droite.

Pour résoudre ce problème dans tous les navigateurs, vous devez spécifier l'emplacement initial:

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

Modifier: Si vous ne savez pas à l'avance la position de votre box1, ma solution et la solution Sotiris pourrait ne pas fonctionner pour vous. Donc, si spécifiant l'emplacement initial en CSS ne fonctionne pas pour vous, peut faire cette astuce:

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

et laisser le CSS à ce qu'il était avant

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