缺少CSS3支持时，如何轻松翻转CSS卡翻转效果？

Question

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

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

在IE9及以下版本中，时钟时间滞后一秒（即在动画的第一秒中，没有可见的变化），并且时钟中的数字也偏移了值1。我的期望不是CSS翻转动画可以正常工作，但要使数字像当前一样立即更改，只能正确。

我已经进行了一段时间的故障排除，但尚未找到解决方案，甚至无法找到问题所在。 我有一个预感，这不是脚本相关的错误； 我怀疑这些数字在HTML中正确更改了（很难用IE的开发人员工具进行验证），但是由于编写的一个或多个CSS规则没有考虑到IE9对CSS3的不良支持，因此它们并未按预期显示。 我有点期待（或至少希望）偶然发现一个或两个CSS属性，仅对其进行修复。

该库基于概念证明，它也存在相同的问题：

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

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

我将不胜感激任何帮助！

Answer 1

删除CSS动画和阴影后，更改li.before的z-index可能会达到目的（请参阅http://codepen.io/cbuckley/pen/rysja ）：

body.play ul li.before {
    z-index: 1;  /* was previously 3 */
}

因此，您可以默认使用z-index: 1 ，然后在JavaScript中对CSS动画进行特征检测，并添加一个body类（例如body.supports-animation ）。 然后相关的CSS可能如下所示：

body.play ul li.before {
    z-index: 1;
}

body.play.supports-animation ul li.before {
    z-index: 3;
}

/* Prefix animation/background declarations with body.supports-animation too */

警告：我没有用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;
}

那为我解决了问题！