Question

以下是适用于chrome和firefox的选框。但它不适用于Internet Explorer。这是为什么？我怎样才能使它工作？这是jsfiddle。

HTML 的

<p class="marquee">
    <span>
        Hey! What's up? <br />
        Second Line <br />
        Third Line <br />
        Fourth Line <br />
        Fifth Line <br /    
    </span>

CSS

    /* define the animation */
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(0, -100%); }
} 
@-moz-keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
} 


/* define your limiting container */
.marquee {
  border: solid 2px;
  white-space: nowrap;
  overflow: hidden;
  border-color: #0aa2e3;
  box-sizing: border-box;
  height:60px;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
  -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

Answer 1

您只为keyframe vendor prefix和MOZILLA添加了WEBKIT，但未使用标准版@keyframes。

查看 DEMO 。

    /* Standard animation */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
}

Answer 2

您使用的是哪个版本的IE？ IE10下面不支持CSS3动画（见http://caniuse.com/#feat=css-animation）

编辑：啊，是的，还有不使用Kheema强调的标准化标记的问题。

Answer 3

使用 overflow：hidden 使选取框元素的宽度固定，并且内部跨距宽度足以适合所有元素的水平，然后使用普通JS将 marginLeft 更改为负数。

m = document.getElementsByClassName('marquee')[0];
mw = m.offsetWidth * -1;
mL = 0;
setInterval(marquee, 15);
function marquee() {
  mL -= 1;
  if (mL <= mw) mL = 0;
  m.getElementsByTagName('pan')[0].style.marginLeft = mL + "px";
}

如何在IE上有字幕效果？

3 个答案: