IEのスタックドDIVから空白を削除するにはどうすればよいですか？

Question

私は2つのDIVをお互いの上に積み重ね、第3のDIVで囲んでいます。スタックされたDIVの下には、「赤い」DIVがあります。

Chromeでは、DIVが正しく表示されます。 IE6とIE7では、積み重ねられたDIVと赤いDIVの間に空白があります。あなたはCSSでtop: -58を持って

<style> 
div.imgbox { 
    position:relative; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    width:103px; 
    height:58px; 
} 

div.imgthumb { 
    position:relative; 
    background:#000000; 
    z-index:3; 
    width:103px; 
    height:58px; 
} 

div.imgplay { 
    position:relative; 
    top:-58; 
    color:red; 
    z-index:4; 
} 

div.imgplay a { 
    width:103px; 
    height:58px; 
    display:block; 
} 

div.imgplay img { 
    width:25px; 
    height:25px; 
} 
</style> 

<div class="imgbox"> 
<div class="imgthumb"></div> 
<div class="imgplay"><a href="#"><img src="http://freetvpower.com/attachments/Image/play_up.gif" /></a></div> 
</div> 
<div style="width:103px; height:58px; background-color:red;"></div> 

Answer 1

、あなたは 'PX' 接尾辞を省略している - それは次のようになります。

div.imgplay { 
    position:relative; 
    top:-58px; 
    color:red; 
    z-index:4; 
} 

以下の溶液はposition:relativeもみ殻を取り除きます小麦にまっすぐに行く：

http://jsfiddle.net/4UEdJ/ （Internet Explorerでテストされていない：$）

Answer 2

あなたは 'position：relative;'が必要です。あなたの最後のdivで、トップの位置を変更するには、

<div style="width:103px; height:58px; top:-58px; background-color:red; position: relative;"></div>