Internet Explorer 中的 div 位置

Question

我制作的新滑块有问题。

我有 3 个 div 1 个相对和 2 个绝对

CSS： #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 中，滑块工作的信息都在相同的位置，如绝对宽度没有左边。

这是链接；

the page example

Answer 1

从.caixa_pequena 类中删除position: absolute，因为#texto 已经绝对定位。