【发布时间】：2013-09-07 05:30:01
【问题描述】：
我在这个上来回走动，没有成功。这是我从Malsup (Advanced Custom Pager) 获得的幻灯片循环插件，我在我创建的网页上使用了它。它在每个浏览器上都能流畅运行，但是当我在任何版本的 Internet Explorer 中打开它时，它会使用滑块寻呼机缩略图并在每个浏览器周围放置一个难看的蓝色超链接边框，从而使网站的设计方面陷入混乱。我尝试添加类和样式来修复它，（即边框：无；）但不能让它恰到好处。
（旁注） 幻灯片中有音乐，使用 HTML5 音频标签，但 IE8 不使用它，所以我正在努力将 jPlayer 安装到网站中。
目前正在直播：click here :-)
这里缩小范围，以防有助于解决问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Restoration Homestead - Bed & Breakfast Farmstay</title>
CSS 链接
<link href="style/style1.css" type="text/css" rel="stylesheet" />
<link href="style/meettheteam.css" type="text/css" rel="stylesheet" />
JavaScript 链接
<script src="jquery.js"></script>
<script src="all.js"></script>
<script src="captions.js"></script>
<script src="backstretch.js"></script>
jQuery
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'fade',
speed: 1000,
timeout: 7280,
next: '#arrow_right',
prev: '#arrow_left',
});
</script>
</head>
<body>
<script>
$.backstretch("images/Blurred.jpg");
</script>
<div id="content"><div id="content_container">
<div id="text_team">
<h1>Take a Musical Tour of the Farm!</h1>
<p class="infotext">Music courtesy of Scottish songwriter Dougie Maclean: <a href="https://itunes.apple.com/us/album/inside-the-thunder/id442643297" target="_blank">Open Fields</a></p>
</div>
<div id="pager_container">
<!-- empty element for pager links -->
<div id="adv-custom-pager" class="center external"></div>
</div><!--End of pager_container-->
<div id="slideshow_team">
<div id="arrow_left" id="arrow_left"></div>
<div id="arrow_right" id="arrow_right"></div>
<div id="slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-pager="#adv-custom-pager"
data-cycle-pager-template="<a href=#><img src='{{src}}' width=45 height=35> </a>">
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="images/slider/sunrise.jpg"
data-cycle-title="Sunrise at Restoration Homestead"
data-cycle-desc=""
/>
<img src="images/slider/elsie.jpg"
data-cycle-title="Elise"
data-cycle-desc="The farm's milk cow"
/>
</div>
</div><!-- End of content_container -->
</div><!--End of content-->
CSS 样式
@charset "UTF-8";
/* CSS Document */
#slideshow_team {
width:700px;
height:545px;
background:#FFF;
overflow:auto;
}
#slideshow {
width:700px;
height:545px;
background:#FFF;
display:block;
overflow:hidden;
}
#text_team {
width:250px;
height:140px;
float:left;
padding:25px;
background:#FFF;
}
#pager_container {
width:300px;
height:355px;
background-color:rgb(255,255,255);
float:left;
position:relative;
clear:both;
}
#arrow_left {
width:30px;
height:545px;
float:left;
background-image:url(../images/back.png);
z-index:600;
display:block;
position:absolute;
}
#arrow_right {
width:30px;
height:545px;
margin-left:670px;
background-image:url(../images/forward.png);
z-index:600;
display:block;
position:absolute;
}
.cycle-overlay {
font-family:'ColaborateRegular';
font-size:16px;
position: absolute;
bottom: 0;
width: 625px;
z-index: 600;
margin-left:30px;
background-color:rgba(0,0,0,0.4);
color:rgb(255,255,255);
padding: 15px 0 15px 15px;
}
#adv-custom-pager {
margin-right:auto;
margin-left:auto;
width:210px;
height:327px;
}
#adv-custom-pager a:link {
text-decoration:none;
text-decoration:underline none;
}
#audio {
float:left;
position:relative;
z-index:100;
width:300px;
height:20px;
}
img a {
border:none;
}
有什么建议吗？我很欣赏这个！！！！ 亚当
【问题讨论】：
-
与问题无关，但左侧的缩略图需要很长时间才能加载！也许你应该为他们使用一些较低分辨率的图像。不错的网站:)
-
是的，滑块显然是从完整的图片中拉出的，只是将它们缩小为小缩略图。良好的连接效果很好，但如果有人知道任何方法可以从一组预先调整大小的缩略图中提取它，那就太棒了！
-
感谢您认为这个网站不错！
标签： jquery css internet-explorer cross-browser slideshow