[英]Code not working in IE and Edge
我有一个可以在Chrome中完美运行的脚本,但是CSS在Edge中不起作用,并且滚动文本在IE10中不起作用。
查看它在Chrome中的工作方式(请等待大约5秒钟,以便开始滚动文本:
https://jsfiddle.net/oxw4e5yh/
CSS:
<style>
/* Make it a marquee */
.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>
CSS无法在Edge中运行的原因是因为font
声明。 缺少空间。 在.marquee
内部.marquee
:
font: 50px Verdana;
在IE10 / IE11中不起作用的原因是JavaScript
不支持animationDuration
属性。 看这里
如果您想使其工作,则应删除animation: marquee linear infite;
从css
并将其添加到JavaScript
:
的CSS
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
background-color: #000000;
color: white;
bottom: 0px;
}
JS
spanSelector[i].style.animation = "marquee linear infinite " + timeTaken + "s";
现在它应该可以在IE10 / IE11中工作了:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.