IE8位置：絕對;

這段代碼在Firefox中將黃色框向右移動約20px，但在IE8中它在頁面上移動了20px（它被剪切）。IE8位置：絕對;

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

來源

2011-03-14 PaulP

你能不能從截圖提供/ CSS與你的例子？ – 2011-03-14 10:19:48

你的CSS是什麼樣的？ – 2011-03-14 10:20:42

對不起：D，固定。 – PaulP 2011-03-14 10:21:44

改爲使用right，使用left: '+=20px'。還可以在#box1中添加您的css left:20px。

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

來源

2011-03-14 10:35:10 Sotiris

這是指定由一些偏移動畫絕對元素的位置的很好的做法。你正在運行一個相對動畫（ - =），內部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; 
}

來源

2011-03-14 10:46:33

IE8位置：絕對;

回答

相關問題