1

我目前正在一个网站上工作，我遇到了两个图像无法正确显示的问题。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 没有显示它。有人知道我能做些什么来解决这个问题吗？如果你需要，这里是网站。

谢谢，

摩根

4

1 回答 1

1

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

于 2012-05-29T14:11:49.513 回答