1

現在サイトで作業していますが、2つの画像が正しく表示されないという問題があります。IE 9は私が問題を抱えている唯一のブラウザなので、助けが必要です。影の背景があるスライドショーに取り組んでいます。スライドショーの最後に、スライドショーを前後に移動できるように、透明な2つのクリック可能な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です。私が正しく行っていることを知っている限り、IE9だけがそれを表示していません。誰かがこれを修正するために私ができることを知っていますか？必要に応じて、こちらのWebサイトをご覧ください。

ありがとう、

モーガン

4

1 に答える 1

1

div#click高さはありません。非フローティング、非配置要素を含まないため、980x0px 要素です。この要素に高さを定義すると、それに含まれる矢印が期待どおりに機能します。

于 2012-05-29T14:11:49.513 に答える