bxslider在IE9中不工作 [英] bxslider not working in IE9
问题描述
我有一个bxslider插件工作在一个网站，我正在为某人，它的工作在所有浏览器，除了IE9（可能早期版本的IE也可以，但我必须测试它是9）
I have a bxslider plugin working on a site I am making for somebody and it works in all browsers except IE9 (possibly earlier versions of IE also but all I have to test it on is 9)
我想知道我的代码在哪里出错。我会提到它与scrolldeck视差插件一起运行
I'm wondering where I'm going wrong in my code. I'll mention it's running alongside the scrolldeck parallax plugin
这是从我的头相关的代码（调用bxslider和scrolldeck视差）：
Here is the related code from my header (calling the bxslider and scrolldeck parallax):
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="tipTip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.tipTip.js"></script>
<script src="jquery.bxslider.js"></script><!-- bxSlider Javascript file -->
<link href="jquery.bxslider.css" rel="stylesheet" /><!-- bxSlider CSS file -->
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.6);
$('#second').parallax("50%", 0.5);
$('.bxslider').parallax("50%", 0.8);
$('#third').parallax("50%", 0.6);
$('#fourth').parallax("50%", 0.5);
$('#fifth').parallax("50%", 0.5);
$('#sixth').parallax("50%", 0.8);
$('.bxslider').bxSlider();
})
</script>
这里是bxslider在正文中的位置：
Here is where the bxslider is in the body:
<div id="third">
<div class="float-slider">
<!-- <ul class="bxslider">
<li><img src="images/thirdBG3.jpg" /></li>
<li><img src="images/thirdBG4.jpg" /></li>
</ul> -->
<ul class="bxslider">
<li>
<div class="slider-img" style="background: url(images/thirdBG3.jpg) 50%" >
<div class="textBox"><h2 style="margin:0px;padding:0px">The Making Of A Monarch</h2>
<p>TEXT</p></div>
</div>
</li>
<li>
<div class="slider-img" style="background: url(images/thirdBG4.jpg) 50%" >
<div>more Text here</div>
</div>
</li>
</ul>
</div>
<div class="float-left">
<div class="story">
</div>
</div> <!--.story-->
</div> <!--#third-->
bxslider的CSS：
And the CSS for the bxslider:
/**
* BxSlider v4.0 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2012
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position:absolute;
margin: 0 0 0 0;
padding: 0;
/**zoom: 1;**/
width:100%;
height:550px;
}
.bx-wrapper img {
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
border:none;
background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: relative;
bottom: 80px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 500;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 0;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-next{
position:relative;
}
.bx-wrapper .bx-prev {
left: 20px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 20px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a { /**SIZE OF NEXT AND PREV BUTTONS**/
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 100;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
任何帮助都会很热。 PS。另外，当我调整窗口大小bxslider按钮停止工作...我试着重新初始化它，当窗口调整大小，但它所做的是重复bxslider和创建数百个实例的东西。
Any help would be hot. PS. Also, when I resize the window the bxslider buttons stop working...I've tried re-initializing it when the window resizes but all it does is duplicates the bxslider and creates hundreds of instances of the thing.
推荐答案
我有一个完全相同的问题。我通过修改插件核心文件来解决它。我用< a>替换了所有的标签，清除缓存，它工作奇妙。 < a> 元素（其具有空的 href 属性） ; span>
I had a exactly the same problem. I resolved it by modifying the plugin core file. I replaced all 5 <a> elements (which had empty href attribute) with <span> tags, cleared cache and it works marvelous.
这可能足以提供一些锚点（例如设置 href =＃top但在我的情况下，滑块是相当高，我想避免页面跳跃，或者每次下一个/ prev按钮点击时的某个指定点。
It might also be enough to just supply some anchor (setting href="#top" for example), yet in my case the slider was quite high, and I wanted to avoid the page jumping up, or to some specified point every time the next/prev buttons are clicked.
这篇关于bxslider在IE9中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
