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和IE中测试了你的代码。 8它似乎覆盖透明div罚款。在IE 6中，我遇到了类似图像链接的问题。如果它只在IE 6中，那么我会说它是你用作背景的透明png。您可以使用一些Java hacks来解决此问题。这是我以前用来解决这个问题的一个非常好的资源：

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

IE中的z索引背景问题

1 个答案: