文本动画在IE中不起作用

Question

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

有没有人有线索？

Answer 1

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

您可以使用的一种解决方法是将父级列表项元素的位置设置为相对位置。这会导致不透明度声明级联下来并影响绝对定位的子节点。

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/