以下是我的代码http://jsfiddle.net/wf32jbhx/
的链接我已尝试在我的sharepoint网站上托管图像,图像只是堆叠在一起,并且格式不正确。但是,我的sharePoint网站上的Chrome工作正常。
当我从计算机上的本地存储中打开.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 }
答案 0 :(得分:1)
有什么问题?
SharePoint 2010和2007强制Internet Explorer以兼容模式运行,以便使所有正确的浏览器对象顺利运行(这为您提供了在数据表视图中查看列表或在Excel中启动文件而非下载文件的功能)。
不幸的是,兼容性视图在遵循HTML和CSS标准方面大致相当于Internet Explorer 8。
如果您弹出F12开发人员工具并将文档模拟模式切换为8而不是Edge,我认为您会发现#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul
和@font-face
规则等高级CSS选择器只是不行。
这是一个CSS3参考,显示哪些浏览器版本支持哪些CSS3属性。 http://www.w3schools.com/cssref/css3_browsersupport.asp
另请参阅此处的CSS选择器参考,并注意IE8不支持大多数标记为CSS3的选择器(仅限CSS1和CSS2):http://www.w3.org/TR/selectors/#selectors
如何解决?
您可以让代码与旧版Internet Explorer一起使用,也可以使用元标记更新SharePoint网站使用的母版页,从而强制浏览器进入边缘模式而不是8。
请注意,如果您强制浏览器进入边缘模式,虽然您将获得现代HTML和CSS的好处,但您将失去IE8特定ActiveX控件的优势,因此请注意用户如何与之交互在做任何事情之前你的SharePoint环境。
可以在整个SharePoint中使用多个不同的主页,因此您理论上可以为您想要使用现代HTML / CSS / JavaScript的情况添加自定义母版页,并且仍然使用IE8模式强制母版页用户直接与SharePoint列表和库交互的页面。