[英]Image Slider works fine in Chrome but not in IE11
这是我的代码的链接http://jsfiddle.net/wf32jbhx/
我也尝试过将图像托管在我的共享点站点上,并且这些图像只是一堆又一堆,并且格式不正确。 但是,在我的sharePoint网站上的Chrome中,IT工作正常。
当我从计算机上的本地存储打开.html文件时,它在IE11选项卡中显示正常。 当我尝试使用来自我的SharePoint网站位置的文件在IE11中打开它时,就会出现此问题。 有谁知道是什么引起了这个问题。
的HTML
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls"/>
<label for="button-5"></label>
<label for="button-1" class="arrows" id="arrow-1">></label>
<label for="button-2" class="arrows" id="arrow-2">></label>
<label for="button-3" class="arrows" id="arrow-3">></label>
<label for="button-4" class="arrows" id="arrow-4">></label>
<label for="button-5" class="arrows" id="arrow-5">></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
<div class="description">
<input type="checkbox" id="show-description-1"/>
<label for="show-description-1" class="show-description-label">I</label>
<div class="description-text">
<h2>Flower power</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li id="slide2">
<img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
<div class="description">
<input type="checkbox" id="show-description-2"/>
<label for="show-description-2" class="show-description-label">I</label>
<div class="description-text">
<h2>Golden sunset</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li id="slide3">
<img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
<div class="description">
<input type="checkbox" id="show-description-3"/>
<label for="show-description-3" class="show-description-label">I</label>
<div class="description-text">
<h2>Flower power again</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li id="slide4">
<img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
<div class="description">
<input type="checkbox" id="show-description-4"/>
<label for="show-description-4" class="show-description-label">I</label>
<div class="description-text">
<h2>Stormy coast</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
<li id="slide5">
<img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
<div class="description">
<input type="checkbox" id="show-description-5"/>
<label for="show-description-5" class="show-description-label">I</label>
<div class="description-text">
<h2>Splash!</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</li>
</ul>
</div>
</div>
的CSS
@font-face {
font-family: Arial;
}
* {
margin: 0;
padding: 0;
}
body {
background-image: url(https://team.amer.mymetlife.com/teams/Corpsystems/Site%20images/Slideshow%20Folder/F1_light_blue_flag.svg.png);
background-repeat: repeat;
height: 500px;
padding: 1px;
}
h1 { color: white }
#slideshow-wrap {
display: block;
height: 320px;
min-width: 260px;
max-width: 640px;
margin: auto;
border: 12px rgba(255,255,240,1) solid;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
box-shadow: 0px 0px 5px rgba(0,0,0,.8);
margin-top: 20px;
position: relative;
}
#slideshow-inner {
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
overflow: hidden;
position: relative;
}
#slideshow-inner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
#slideshow-inner>ul>li {
width: 20%;
height: 320px;
float: left;
position: relative;
}
#slideshow-inner>ul>li>img {
margin: auto;
height: 100%;
}
#slideshow-wrap input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
#slideshow-wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: rgba(200,200,200,1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
box-shadow: 0px 0px 3px rgba(0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
#slideshow-wrap label:not(.arrows):active { bottom: -46px }
#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(0,0,0,1) }
#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(0,0,0,1) }
#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(0,0,0,1) }
#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(0,0,0,1) }
#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(0,0,0,1) }
#slideshow-wrap label[for=button-1] { margin-left: -36px }
#slideshow-wrap label[for=button-2] { margin-left: -18px }
#slideshow-wrap label[for=button-4] { margin-left: 18px }
#slideshow-wrap label[for=button-5] { margin-left: 36px }
#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }
#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }
#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }
#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }
#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }
label.arrows {
font-family: Arial;
font-size: 25px;
color: rgb(255,255,240);
position: absolute;
top: 50%;
margin-top: -25px;
display: none;
opacity: 0.7;
cursor: pointer;
z-index: 1000;
background-color: transparent;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}
label.arrows:hover { opacity: 1 }
label.arrows:active { margin-top: -23px }
input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
right: -55px;
display: block;
}
input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
left: -55px;
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }
input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }
input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }
.description {
position: absolute;
top: 0;
left: 0;
width: 260px;
font-family: Arial;
z-index: 1000;
}
.description input { visibility: hidden }
.description label {
font-family: Arial;
background-color: rgba(255,255,240,1);
position: relative;
left: -17px;
top: 00px;
width: 40px;
height: 27px;
display: inline-block;
text-align: center;
padding-top: 7px;
border-bottom-right-radius: 15px;
cursor: pointer;
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
z-index: 5;
color: rgb(20,20,20);
}
#slideshow-inner>ul>li:hover .description label { opacity: 1 }
.description input[type=checkbox]:checked~label { opacity: 1 }
.description .description-text {
background-color: rgba(255,255,230,.5);
padding-left: 45px;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 15px;
position: relative;
top: -35px;
z-index: 4;
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: rgb(20,20,20);
}
.description input[type=checkbox]:checked~.description-text { opacity: 1 }
有什么问题?
SharePoint 2010和2007强制Internet Explorer在兼容模式下运行,以使所有正确的浏览器对象正常运行(这提供了诸如在数据表视图中查看列表或在Excel中启动文件而不是下载文件的功能)。
不幸的是,就遵循的HTML和CSS标准而言,兼容性视图大致等效于Internet Explorer 8。
如果弹出F12开发人员工具,然后将文档仿真模式切换为8(而不是Edge),我想您会发现高级CSS选择器,例如#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul
和@font-face
规则根本不起作用。
这是CSS3参考,显示了哪些浏览器版本支持哪些CSS3属性。 http://www.w3schools.com/cssref/css3_browsersupport.asp
另外,请在此处查看CSS选择器参考,并注意IE8不支持大多数标记为CSS3的选择器(仅CSS1和CSS2): http : //www.w3.org/TR/selectors/#selectors
您如何解决?
您可以使代码与旧版本的Internet Explorer一起使用,也可以使用强制浏览器进入Edge模式而不是8的meta标签更新SharePoint网站使用的母版页。
请注意,如果您强制浏览器进入Edge模式,虽然您将获得现代HTML和CSS的好处,但您将失去IE8特定的ActiveX控件的好处,因此请注意用户如何与SharePoint环境交互在做任何事情之前
可以在整个SharePoint中使用多个不同的母版页,因此从理论上讲,您可以仅针对要使用现代HTML / CSS / JavaScript的情况创建自定义母版页,而对于用户需要访问的页面仍使用IE8模式强制母版页直接与SharePoint列表和库进行交互。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.