1

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

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

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

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

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

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

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

我将不胜感激任何帮助！

4

2 回答 2

1

删除 CSS 动画和阴影后，更改z-indexofli.before可能会成功（请参阅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 尝试过，也没有在没有动画支持的浏览器上实际测试过，但我希望它提供了一个可能的选择 :-)

于 2013-08-28T19:29:21.430 回答
1

只需更改 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;
}

这解决了我的问题！

于 2013-10-28T21:17:09.343 回答