Z-index in IE9错误

我目前正在一个网站上工作，而且我遇到了两个图像显示不正确的问题。 IE 9是我遇到问题的唯一浏览器，所以我只需要一些帮助。我正在研究一个有阴影背景的幻灯片。在幻灯片的结尾，我试图创建两个透明的可点击div，以便来回移动幻灯片。但是，阴影背景图片是在透明div上面叠加的，并且覆盖div的所有边缘，只要光标变为指针就是当你在div上时。Z-index in IE9错误

<div id="HomeCarousel"> 
     <div id="slideshow"> 
      <div id="slideshow-area"> 
       <div id="slideshow-shadow"><img src="@ACCOUNTRESOURCES/BannerOverlay.png" /></div> 
       <div id="slideshow-container"> 
        <div id="slideshow-scroller"> 
         <div id="slideshow-holder"> 
          <div class="slideshow-content" id="slide0"> 
           <img name="image0" src="@ACCOUNTRESOURCES/Orange.png"/> 
          </div> 
          <div class="slideshow-content" id="slide1"> 
           <img name="image1" src="@ACCOUNTRESOURCES/Green.png"/> 
          </div> 
          <div class="slideshow-content" id="slide2"> 
           <img name="image2" src="@ACCOUNTRESOURCES/Blue.png"/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="click"> 
       <div id="left-arrow"></div> 
       <div id="right-arrow" ></div> 
      </div> 
     </div> 
    </div>

这是我的HTML布局，＃幻灯区和＃左箭头，＃右箭头是我有一个问题的元素。

#slideshow { 
    position:relative; 
    } 
    #slideshow-area { 
    position:absolute; 
    left:35px; 
     width:910px; 
    height:279px; 
    } 
    #slideshow-shadow { 
    position:absolute; 
    width:966px; 
    top:-22px; 
    left:-28px; 
    z-index:2; 
    } 
    #slideshow-container { 
    position:absolute; 
    overflow:hidden; 
    width:910px; 
    height:279px; 
    } 
    .slideshow-content { 
    width:910px; 
    height:279px; 
    } 
    #click { 
    position:relative; 
    position:absolute; 
    z-index:4; 
    } 
    #left-arrow, #right-arrow { 
    height:279px; 
    width:35px; 
    position:absolute; 
    top:22px; 
    z-index:3; 
    } 
    #left-arrow { 
    left:0px; 
    cursor:pointer; 
    } 
    #right-arrow { 
    left:945px; 
    cursor:pointer; 
    }

这是我的CSS，据我所知我正在做的事情，只是IE 9没有显示它。有人知道我可以做什么来解决这个问题吗？如果你需要的话，这里是website。

感谢，

摩根

来源

2012-05-29 morganw09dev

你能格式化CSS的底部部分吗？ – Fluidbyte

我不好，给我一分钟。 – morganw09dev

div#click没有高度;它是一个980x0px的元素，因为它不包含非浮动的非定位元素。定义此元素的高度，其中包含的箭头将按预期工作。

来源

2012-05-29 14:11:49

但是，如果您检查网站＃左箭头和＃右箭头都有宽度和高度，并且它们可以在网站上点击，则它们只会被＃slideshow-shadow隐藏。我也这么想。 – morganw09dev

Z-index in IE9错误

回答

相关问题