1

私は現在、奇妙な問題に困惑しています。すべての主要なブラウザーで正常に機能するjQueryスライダーがありますが、Internet Explorer 8を使用しているときは、[次へ] / [前へ]ボタンが機能しません（たとえば、カーソルを合わせたときにリンクがありません）。

私のHTML： 

<div id="container">
    <div id="frame"></div>
    <div id="slides">
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
        <div class="slides_container">
            <img src="images/slider/4.jpg" width="954" height="247" alt="Slide 1">
            <img src="images/slider/4.jpg" width="954" height="247" alt="Slide 2">
            <img src="images/slider/4.jpg" width="954" height="247" alt="Slide 3">
        </div>
    </div>
</div>

私のCSS： 

#container {
    width: 964px;
    height: 257px;
    z-index: 99999;
    padding: 5px;
    margin-top: 16px;
    margin-left: 7px;
    position: relative;
}

#frame {
    background: url('../images/slider/slider_frame.png') no-repeat;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 5px #000000, 0 0 6px #000000;
    height: 257px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -5px;
    width: 964px;
    z-index: 99999;
}

/*
    Slideshow
*/

#slides {
    position: absolute;
    top: 1px;
    z-index: 100;
    left: 5px;
    width: 954px;
    height: 247px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width: 954px;
    position: relative;
    display: none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width: 570px;
    height: 270px;
    display: block;
}

.slides_container a img {
    display: block;
}

/*
    Next/prev buttons
*/

#slides .next, #slides .prev {
    position: absolute;
    top: 100px;
    width: 48px;
    height: 48px;
    display: block;
    z-index: 101;
}

#slides .next {
    background-image: url('../images/slider/arrow-right.png');
}

#slides .next:hover {
    background-image: url('../images/slider/arrow-right-hov.png');
}

#slides .prev {
    background-image: url('../images/slider/arrow-left.png');
}

#slides .prev:hover {
    background-image: url('../images/slider/arrow-left-hov.png');
}

#slides .next {
    left: 906px;
}

基本的に私の問題を言い換えると、
このjQueryスライダー内に、スライドを切り替える目的の画像があります。ただし、この画像にはIE8にリンクがないため、IE8を使用しているユーザーはスライド間をスクロールできません。

4

1 に答える 1

1

私がcssを見ると、あなたのcssクラスにはz-indexの問題があります：

#frame {
background: url('../images/slider/slider_frame.png') no-repeat;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 5px #000000, 0 0 6px #000000;
height: 257px;
left: 0;
pointer-events: none;
position: absolute;
top: -5px;
width: 964px;
z-index: 99999; // <-----------------this has the higher index.
}

#slides .next, #slides .prev {
position: absolute;
top: 100px;
width: 48px;
height: 48px;
display: block;
z-index: 101; //<--------------------this has a lower index
}

interchange the z-indexesまたはmake a new higher z-indexボタンをクリックしてみてください。

これを試して、これが役立つかどうかを確認してください。

于 2012-12-23T17:39:55.860 に答える