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錯誤

回答

相關問題