IE에서 스택 된 DIV의 공백을 제거하려면 어떻게합니까?

Question

두 개의 DIV가 서로 쌓여 있으며 세 번째 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>