[英]IE8 - jQuery Slider Next/Prev Buttons Without Link
我目前陷入一個奇怪的問題。 我有一個在所有主要瀏覽器上都能正常工作的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的用戶在幻燈片之間滾動。
您的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
。
試試這個,看看是否有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.