javascript - CSS/JS 时钟 : Strange positioning behaviour in IE8

Question

我想在不使用任何图像的情况下制作一个动画时钟。我设法做对了大部分；然而，当其中一只指针到达 12 时，它会一直跳到表盘底部，然后逐渐向上移动并到达正确的位置，因为它指向 3。这种情况仅在 IE8 中发生。知道如何解决这个问题吗？

这是 HTML 文件:https://dl.dropboxusercontent.com/u/39330021/Test/CSS3-JS-Clock-3.htm

显示问题的屏幕截图:

Answer 1

我猜你正在使用 CSS3 旋转和 IE8 矩阵过滤器作为后备。MS 矩阵过滤器的工作方式有点不同:旋转元素的边界框得到扩展，比旋转前占据更多位置。因为边界框的 anchor 在左上角，所以图像(或其他内容)会向下和向右移动以进行正确的变换。您需要通过水平和垂直移动盒子来补偿此移动。不是那么容易的任务。

静态处理:
互联网上有一些资源可以帮助您处理静态示例:

• IETransformsTranslator
• Correcting Transform Origin in IE

动态处理:
为了您的动态目的，如果您真的真的真的需要支持 IE8，我会推荐 GSAP，这是著名的 Greensock 从 ActionScript 3 到 JS 的库端口。我知道它补偿变换原点并且在 IE8 中有一个兼容的旋转解决方案:

GSAP Animation Library