IE中的z索引背景问题

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 hack 来解决此问题。这是我以前用来解决此问题的一个很好的来源：

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