Internet Explorer/IEで表示されないCSS位置付けの画像

Question

タイムラインのセクションが完成すると、背景は緑色の画像で構成され、前景は実際の画像になりますチェックマークの画像要素。これは、Firefoxの、クロム、およびSafariで（正しい）をどのように見えるかです：

これは、IE 7と8（多分9で（間違った）は、テストしていませんどのように見えるかですそれでも）： ：

私は相対的な絶対的な位置を使って作業しています。私はZインデックスや他のテクニックについて考えることができるすべてについて試しました。私は潜在的な解決策（img要素のz-インデックスをバックグラウンドのz-インデックスより小さくする）を持っていたarticleがここにありますが、うまくいきませんでした。

とにかくお助けください！ここで

だ私（簡体字）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/

希望のあなたのイメージにAZインデックスを割り当てるには、この

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

それは問題ではなく、コンテナのdiv .completeとの相互作用を引き起こしていること、実際にあなたの.timeline-dividerです。あなたはマークアップを変更できますか？他の可能な修正が.timeline-dividerの上に空のdivを追加したり、2つのfloat以下のIMGを移動するとだろう

<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> 

：もしそうなら、あなたは、単に別のdivの下側の2つの要素をラップすることにより、あなたの問題を解決することができるはずですそれをclear: both;にする。確かにこれらのソリューションは特に理想的ではありませんが、うまくいくでしょう。

これは実際にはrather well-documented bugであることにも注意してください。