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。