Internet Explorerの画像上に表示されるテキスト

Question

IEでZ-インデックスに問題があります。

私はdiv、このdivの画像とこの画像の上のテキストを持っています。

<section id="content_right"> 

        <div class="mini_bloc_image"> 
         <img alt="Camionnette VCI" src="img/mini_reparation_site_nb.png" /> 
         <span><a href="#">R&eacute;paration sur site</a></span> 
         <span>Nous nous d&eacute;pla&ccedil;ons</span> 
        </div> 

とCSS：ここ

が私のHTMLコードがある

#content_right { 
width: 230px; 
height: 484px; 
float: right; 
} 

.mini_bloc_image { 
height: 148px; 
margin-bottom: 20px; 
position: relative; 
} 

.mini_bloc_image > img { 
position: absolute; 
} 

.mini_bloc_image > span:first-of-type { 
display: block; 
position: absolute; 
top: 95px; 
left: 0px; 
font-size: 1.1em; 
background-color: #ffffff; 
padding: 4px 5px 4px 5px; 
} 

.mini_bloc_image > span:last-of-type { 
display: block; 
top: 95px; 
left: 0px; 
position: absolute; 
left: 50px; 
top: 125px; 
color: #ffffff; 
font-size: 1.1em; 
font-family: 'Marck Script', cursive; 
} 

IEは私のテキストを画像の上にある必要があります理解していない...

私はいくつかのを見つけましたこのような解決策はhttp://www.adrenatie.com/z-index-et-ie6/またはhttp://systembash.com/content/css-z-index-internet-explorer/ですが動作しません。

誰かが私を助けてくれますか？

Answer 1

問題は、デフォルトでインラインでレンダリングされspan S、扱っているです。あなたがdisplay:blockを使用する場合は、Zインデックスが使用されます。

.mini_bloc_image > span:first-of-type { 
display: block; 
position: absolute; 
z-index: 10; 
font-size: 1.1em; 
background-color: #ffffff; 
padding: 4px 5px 4px 5px; 
margin-top: 95px; 
} 

.mini_bloc_image > span:last-of-type { 
display: block; 
position: absolute; 
z-index: 10; 
color: #ffffff; 
font-size: 1.1em; 
font-family: 'Marck Script', cursive; 
margin-left: 30%; 
margin-top: 125px; 
} 

インライン要素と位置についての詳細は、this articleを参照してください。