2

我用这个来来回回，没有成功。这是我从Malsup (Advanced Custom Pager)获得的幻灯片循环插件，我在我创建的网页上使用了它。它在每个浏览器上都能流畅运行，但是当我在任何版本的 Internet Explorer 中打开它时，它会使用滑块寻呼机缩略图并在每个浏览器周围放置一个难看的蓝色超链接边框，从而使网站的设计方面陷入混乱。我已经尝试添加类和样式来修复它，（即边框：无；）但不能让它恰到好处。

（旁注）幻灯片中有音乐，使用 HTML5 音频标签，但 IE8 不使用它，所以我正在努力将 jPlayer 安装到站点中。

它正在直播：点击这里:-)

在这里缩小范围，以防有助于解决问题：

<!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 &amp; 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;
}

有什么建议么？我很欣赏这个！！！！亚当

4

1 回答 1

1

我认为问题是你需要做更多的

a, img {
    border:none;
}

请参阅：如何在 IE 中删除链接周围的边框？

于 2013-09-06T21:30:01.163 回答