Internet Explorer/IE에서 CSS 위치 지정 이미지가 표시되지 않음

Question

타임 라인의 섹션이 완료되면 배경이 녹색 이미지로 구성되고 포 그라운드는 실제 체크 표시의 이미지 요소. 이것은 파이어 폭스, 크롬, 사파리에서 (올바른을) 모습입니다 :

이것은 IE 7, 8 (아마도 9 (잘못된)는 테스트하지 않은 모습입니다 아직 :) : :

저는 상대적인 절대 위치 지정으로 작업하고 있습니다. 나는 내가 Z- 인덱스와 다른 기술에 관해서 생각할 수있는 모든 것을 시도했다. 심지어 여기에 article (배경의 z- 인덱스보다 작은 img 요소의 z- 인덱스를 만들 수 있음)의 잠재적 인 솔루션이 있지만 작동하지 않습니다.

어쨌든 도와주세요! 여기

의 내 (간체) CSS : 여기

.timeline-container { 
     width: 820px; 
     height: 50px; 
    }   
    .timeline-step { 
     width: 164px; 
     height: 22px; 
     float: left; 
     background: url(http://i.stack.imgur.com/amRJt.png) -10px 0px no-repeat; 
    }     
    .complete { 
     background: url(http://i.stack.imgur.com/NgSG6.png!) -10px 0px no-repeat; 
     position: relative; 
    } 
    .complete img { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     right: 50%; 
    }     
    .timeline-divider { 
     background: url(http://i.stack.imgur.com/AJw3e.png); 
     height: 30px; 
     width: 1px; 
     float: right; 
    }   
    .timeline-label { 
     color: #C5C5C%; 
     font-size: 12px; 
     font-weight: bold; 
     width: 100%; 
     display: block; 
     float: left; 
     text-align: center; 
    }   

의 내 (간체) HTML :

<div class="timeline-container"> 
    <div class="timeline-step complete"> 
     <img src="http://i.stack.imgur.com/hS83c.png" alt="complete" /> 
     <div class="timeline-divider"> 
     </div> 
     <span class="timeline-label">Confirm Eligibility</span> 
    </div> 
</div> 

녹색의 전면에 표시하는 것을 체크 박스를하는 방법에 대한 어떤 생각 " 타임 라인의 "완료"섹션? 감사!

꺼내어 IE에 직접 사용하는 경우 그것은 실패, JFiddle에서 작동하는 보이지만 ... 여기

가 JFiddle입니다 : http://jsfiddle.net/SY9q5/

Answer 1

가 위치를 추가 : 상대; z- 색인 : 0; 이

부모 태그를 컨테이너 .timeline 다음> 0

http://jsfiddle.net/5wsbC/

희망의 이미지에 알파벳 순으로 색인을 할당하려면이

Answer 2

내가 할 수있는 절대 위치를 사용하지 않는 제안하는 데 도움이 원인

.complete img { 

    padding-top:5px; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    z-index:10; 

}  

시도

http://jsfiddle.net/BTxP6/1

Answer 3

실제로 당신의 문제, 컨테이너 사업부 .complete하지 상호 작용을 일으키는 .timeline-divider을. 마크 업을 변경할 수 있습니까? 당신은 단순히 다른 사업부에서 낮은 두 가지 요소를 배치하여 문제를 해결 할 수 있어야하므로 경우

<div class="timeline-step complete"> 
    <img src="http://i.stack.imgur.com/hS83c.png" alt="complete" /> 
    <div> 
     <div class="timeline-divider"> 
     </div> 
     <span class="timeline-label">Complete Application</span> 
    </div> 
</div> 

다른 가능한 수정 .timeline-divider 위에 빈 사업부를 추가하거나 두 개의 수레 아래 IMG를 이동하는 것 및 그것을 clear: both;으로 만드십시오. 분명히이 솔루션들 중 어느 것도 특히 이상적은 아니지만 제대로 작동 할 것입니다.

사실이 값은 rather well-documented bug입니다.