Question

我正在使用库FlipClock.js来构建一个使用CSS“卡片翻转效果”版本的模拟式时钟。不幸的是，只有在构建我的项目之后，我才注意到影响Internet Explorer 9及以下版本的长期错误：

https://github.com/objectivehtml/FlipClock/issues/7

在IE9及以下版本中，时钟时间滞后一秒（即，在动画的第一秒，没有任何可见的变化），并且时钟中的数字也会偏移值1.我的期望不是

我已经进行了一段时间的故障排除，但还没有找到解决方案，甚至找不到问题。我有一种预感，这不是与脚本相关的错误;我怀疑HTML中的数字正在改变（很难用IE的开发人员工具验证），但由于一个或多个CSS规则没有考虑IE9的CSS3支持不佳，它们只是没有按预期显示。我有点期待（或者至少希望）偶然发现一两个只修复它的CSS属性。

该库基于概念验证，它表现出同样的问题：

http://codepen.io/ademilter/pen/czIGo

我正在进行故障排除以保持简单，如果我找到修复程序，则会向FlipClock.js库提交拉取请求。

我非常感谢任何帮助！

Answer 1

删除CSS动画和阴影后，更改z-index的{{1}}可能会有效（请参阅http://codepen.io/cbuckley/pen/rysja）：

li.before

因此，默认情况下您可以使用body.play ul li.before { z-index: 1; /* was previously 3 */ }，然后在JavaScript中使用功能检测CSS动画并添加一个正文类（例如z-index: 1）。然后相关的CSS可能如下所示：

body.supports-animation

警告：我没有尝试使用FlipClock，也没有在没有动画支持的情况下在浏览器上进行过测试，但我希望它提供了一个可能的选项： - ）

Answer 2

只需更改z-index即可解决IE8和IE9的问题，但会破坏所有现代浏览器的转换。

要专门针对I8或IE9，您可以使用：在你的JS文件上添加：

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

然后在你的CSS上你可以用这段代码检测IE8和IE9（flipclock.css第160行）：

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 3;/*Original */
}
/*ie8 and ie9 fixes*/
html[data-useragent*='MSIE 8.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

html[data-useragent*='MSIE 9.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

这解决了我的问题！

当缺少CSS3支持时，这种CSS卡翻转效果如何能够优雅地回落？

2 个答案: