z在IE中的索引背景問題

Question

我有一個jQuery工具卷軸設置與控制管理兩個單獨的信息的div - 一個圖像，其他相關的文本，需要坐在圖像的頂部與透明的bg圖像。我正在使用z-indexing來實現這一點，並意識到IE的問題，但我無法對其進行排序（在IE6-8中測試）。下面的問題的圖片：

http://test.shakingpaper.com.au/not_working.png

看來，重疊的div正在對集裝箱白色。儘可能地嘗試，我無法解決這個問題。 HTML/CSS代碼如下：

 <div id="content"> 

<div id="nav"></div> 

    <div class="s4 slideshow"> 
     <div> 
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> 
      </div> 
      <div> 
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> 
      </div> 
      <div> 
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" /> 
      </div> 
     </div> 

    <div id="overlay_bg"></div> 

    <div class="s4 information"> 
     <div> 
     <h1>Support</h1> 
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> 
    <p><a href="#">Support Us</a></p> 
      </div> 
      <div> 
      <h1>Events</h1> 
    <p>Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> 
    <p><a href="#">Read More</a></p> 
      </div> 
      <div> 
     <h1>Regional</h1> 
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p> 
    <p><a href="#">Support Us</a></p>   
      </div> 
     </div> 

</div> <!-- end of content --> 

    #content { 
    height: auto; 
     min-height: 300px !important; 
     overflow: hidden; 
     position:relative; 
     margin-left: 27px; 
     width: 770px; 
     padding-bottom: 43px; 
    } 

#nav { 
    width: 60px; 
    z-index: 10000; 
    position: absolute; 
    top:340px; 
    left: 28px; 
} 

.s4 { 
    width: 770px; 
    height: 370px; 
    overflow: hidden; 
} 

#nav a { 
    background-color: transparent; 
    background-image: url(images/transition.png); 
    background-position: 0 0; 
    text-indent: -1000em; 
    width: 10px; 
    height: 10px; 
    display: block; 
    float: left; 
    margin-right: 5px; 
} 

#nav a.activeSlide { 
    background-position: 0 -10px; 
} 

#overlay_bg { 
    background: url(images/soild_block.png) no-repeat; 
    width: 318px; 
    height: 339px; 
    z-index: 5000; 
    position: absolute; 
    top: 28px; 
} 

.information { 
    position: absolute; 
    top: 60px; 
    left: 28px; 
    z-index: 16000; 
    width: 290px; 
    height: 260px; 
    color: #FFF; 
} 

.information h1 { 
    font-size: 50px; 
    font-style: italic; 
    text-transform: uppercase; 
} 

.information p { 
    font-size: 17px; 
    line-height: 27px; 
    margin-top: 37px; 
} 

.information a { 
    font-size: 13px; 
    padding-bottom: 2px; 
    border-bottom: 1px solid; 
    color: #FFF; 
    text-transform: uppercase; 
    font-style: italic; 
} 

.information a:hover { 
    color: #000; 
} 

任何幫助將不勝感激。

Answer 1

這是發生在每個瀏覽器或只是IE 6？我在IE 7 & 8中測試了你的代碼，它好像覆蓋了透明的div。在IE 6中，我遇到了像圖片鏈接的問題。如果它只在IE 6中，那麼我會說它是你用作背景的透明PNG。有一些Java黑客可以用來解決這個問題。這裏是我以前用來解決這個問題一個很好的來源：

http://homepage.ntlworld.com/bobosola/pnghowto.htm