在互联网浏览器中的div位置

Question

我遇到了即时通讯新滑块的问题。

我有3 DIV 1相对于与2个绝对

的CSSS： #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已经绝对定位。