Текст поверх изображения в Internet Explorer

Question

У меня в настоящее время проблема с моим z-индексом с IE.

У меня есть div, изображение в этом div и некоторый текст над этим изображением.

Вот мой HTML код:

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

#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, будет использоваться г-индекс:

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