Internet Explorer中的图像上的文本

Question

我目前在使用IE浏览器时遇到了z-index问题。

我有一个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，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。