div在Internet Explorer中的位置

Question

我在制作新的滑塊時遇到問題。

我有3個div 1個相對和2個絕對

CSS： #caixa_grande{ position:relative; width:150px; height:80px; overflow:hidden;} #caixa_grande{ position:relative; width:150px; height:80px; overflow:hidden;}
#texto{ position:absolute;}
.caixa_pequena{ position:absolute;}

將左側添加到滑塊項目的jQuery

$(document).ready(function(){
    esq = 0;
$(".caixa_pequena").each(function(){
    var $element = $(this).css('left'); 
    final = parseFloat($element) + parseFloat(esq);        
    $(this).css('left', parseFloat(final) + 'px');
    esq = esq  + 200;   
});
});

function nav_depois(){
    $("#texto").animate({left: '-=200'}, 1500);
}

function nav_antes(){
   $("#texto").animate({left: '+=200'}, 1500);
}

和div

<div id="caixa_grande">
<div id="texto">    
    <div class="caixa_pequena">SPORT LISBOA E BENFICA</div>
    <div class="caixa_pequena">SPORTING CLUBE DE PORTUGAL</div>
    <div class="caixa_pequena">FUTEBOL CLUBE DOS COXOS</div>
</div>  
</div>
<div>
    <span><a id="nav_antes" onclick='nav_antes()'>nav_antes</a></span>
    <span><a id="nav_depois" onclick='nav_depois()'>nav_depois</a></span>
</div>  

問題是，在firefox中，滑塊工作正常，並且div信息用200px分隔，但是在Internet Explorer中，滑塊工作在同一位置，例如絕對寬度不剩。

鏈接在這里;

頁面示例

Answer 1

從.caixa_pequena類中刪除position: absolute因為#texto已被絕對定位。