Question

我目前正在一个网站上工作，我遇到两个图像无法正确显示的问题。 IE 9是我唯一遇到问题的浏览器，所以我只需要一些帮助。我正在制作一个有阴影背景的幻灯片。在幻灯片的末尾，我试图创建两个透明的可点击div，这样我就可以来回移动幻灯片。但是阴影背景图像正在透明div的顶部分层，并覆盖div之外的所有边缘，每当光标变为指针时，就是当你越过div时。

<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-area和＃left-arrow，＃right-arrow是我遇到问题的元素。

   #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。

谢谢，

摩根

Answer 1

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

IE9中的Z-index错误

1 个答案: