css - 文本动画在 IE 中不起作用

Question

本网站 users.telenet.be/stijn.aerts 上的文字栏应每 5 秒更改一次。问题是它在 IE 中不起作用，它在其他浏览器中起作用...

有人知道吗？

Answer 1

Internet Explorer 没有将父项的不透明度规则应用于绝对定位的子项。在这种情况下，您正在设置列表项的不透明度，但这并没有级联到其中绝对定位的 h2 元素上。

您可以使用的一种变通方法是将父级列表项元素的位置设置为相对位置。这会导致不透明度声明向下级联并影响甚至绝对定位的 child 。

ul.textslideshow li {
    opacity: 0;
    position: relative;
    animation: textAnimation 25s ease-out infinite;
}

如果您不想放置父子列表项，您可以设置不透明度以继承标题:

ul.textslideshow li h2 {
    opacity: inherit;
    position: absolute;
    /*...*/
}

Internet Explorer 中的问题示例:http://jsfiddle.net/xTG85/show/
在 IE 中解决的问题示例:http://jsfiddle.net/xTG85/1/show/