Question

我和这个人来回走动，没有成功。这是我从Malsup (Advanced Custom Pager)获得的幻灯片循环插件，我在我创建的网页上使用它。它可以在每个浏览器上顺利运行，但是当我在任何版本的Internet Explorer中打开它时，它会使用滑块寻呼器缩略图并在每个浏览器周围放置一个丑陋的蓝色超链接边框，从而使网站的设计方面陷入混乱。我已经尝试添加类和样式来修复它，（即border：none;）但是不能正确使用它。

（旁注）幻灯片中有音乐，使用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 &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;
}

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

Answer 1

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

a, img {
    border:none;
}

请参阅：How to remove borders around links in IE?

jQuery难题 - 网站适用于所有浏览器，但ie8

1 个答案: